[发明专利]一种web前端性能优化的方法

说明书

技术领域

本发明涉及一种web前端性能优化的方法。

背景技术

前端优化是WEB应用优化方案的一部分，前端优化是指对浏览器发送请求到后台资源动态生成的过程的优化，后台的网页资源包括HTML页面、JavaScript脚本、CSS文档、Flash及图片等。WEB应用为了提升页面利用率和用户交互体验性，不断加大网页容量并在网页中应用大量的JavaScript代码及其框架技术，这不仅增加了网页在浏览器中的解析效率、增加客户端的流量，更是延迟网页的加载时间。国外对web系统前端优化方法非常重视，并做了许多相关的工作和研究，而国内的发展状况大部分还是停留在web页面的内容及其正确性方面。

发明内容

本发明要解决的技术问题，在于提供一种web前端性能优化的方法,减少网页的加载时间和提高网页的缓存效率。

本发明是这样实现的：一种web前端性能优化的方法，包括：用CSS Sprites技术，将网页所需的背景图片合并成一张大图，通过CSS的background-position属性，将HTML元素放置到图片中所需的位置上，通过移动合并图片的位置来显示当前所需的图片。

进一步地，还包括：将web中的表格和脚本进行合并及压缩。

进一步地，还包括：网页元素的优化：使用语义化标签、CSS与JavaScript文件外链、将CSS文件放在页面的顶部及将JavaScript文件放在页面底部。

进一步地，还包括：Web缓存优化，添加Expires字段增长Web对象的生命周期；使用CDN技术在现有的网站中间加入新的一层网络架构，Web站点通过资源分发到这层新的网络架构中。

本发明具有如下优点：本发明一种web前端性能优化的方法，极大程度上的加快了网页的加载时间，网页的加载效果更加友好，用户的体验性有了极大的提升。

具体实施方式

本发明web前端性能优化的方法，包括：用CSS Sprites技术，将网页所需的背景图片合并成一张大图，通过CSS的background-position属性，将HTML元素放置到图片中所需的位置上，通过移动合并图片的位置来显示当前所需的图片；将web中的表格和脚本进行合并及压缩；网页元素的优化：使用语义化标签、CSS与JavaScript文件外链、将CSS文件放在页面的顶部及将JavaScript文件放在页面底部；Web缓存优化，添加Expires字段增长Web对象的生命周期；使用CDN技术在现有的网站中间加入新的一层网络架构，Web站点通过资源分发到这层新的网络架构中。

本发明一种具体实施方式如下：

(1)用CSS Sprites技术，将网页所需的背景图片合并成一张大图，通过CSS的background-position属性，将HTML元素放置到图片中期望的位置上，通过移动合并图片的位置来显示当前所需的图片，一方面减少了Http请求次数、减少并发请求，另一方面减少请求的整体的图片大小，极大的减少了加载的时间。

(2)样式表和脚本合并压缩，浏览器客户端首次加载网页时，CSS和JavaScript文件没有被缓存，因而每个文件都要进行一次单独的Http请求，则合并这些文件便可以减少引入文件的数量，从而减少Http请求数量。对CSS和JavaScript文件的压缩，可以极大程度的减少文件的大小，具体的方法包括更换过长的变量名，删除无用代码；删除多余的空格，注释和不必要的分号；合并为一行等。当然目前有一些专门的压缩工具，执行起来也比较方便。

(3)网页元素的优化：HTML的优化，使用语义化标签、CSS与JavaScript文件外链、将CSS文件放在页面的顶部、将JavaScript文件放在页面底部。

(4)Web缓存优化，不是所有的Web资源都是可以被缓存的，因而优化的角度在于提高Web资源的可缓存化。添加Expires字段增长Web对象的生命周期；使用CDN技术即内容分发网络，其原理是在现有的网站中间加入新的一层网络架构，Web站点通过资源分发到这层新的网络架构中。使得这些资源离用户更近，提高用户访问网站的响应速度。

虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。