WEB性能优化

摘要:作为一个前端工作人员,我们不可避免要进行web的性能优化。那么有哪些优化的方法呢?       A、常规项       1 、减少HTTP请求,在网页中图片、css、javascript、flash等等,都会增加我们的HTTP请求,减少请求数能提高WEB的页面响应时间;        2、导入的css和js文件的位置,css放在head部分,js放在body的尾部;        3、js

作为一个前端工作人员,我们不可避免要进行web的性能优化。那么有哪些优化的方法呢?

A、常规

1 、减少HTTP请求,在网页中图片、css、javascript、flash等等,都会增加我们的HTTP请求,减少请求数能提高WEB的页面响应时间;

2、导入的css和js文件的位置,css放在head部分,js放在body的尾部;

3、js/css/html代码的压缩;

4、使用外部的 js/css,内联的css和js其实比外部文件反应更快,那为什么要用外部呢?因为使用外部的css和技术可以让浏览器缓存它,这样不仅HTML文档大小减少,而且不会增加HTTP请求数量。另外,外部的 js/css可以提高代码的重用性;

1 (57).jpg

5、资源的延迟加载(懒加载);

$("img").lazyload

6、预加载;

7、缓存处理,使用localStorage。

B、CSS项

1、避免使用css表达式,因为它被重新极端的次数相当多;

2、避免使用@import ;

3、避免使用IE Filter;

4、避免使用后代选择器 ul>li ;

5、利用css继承机制;

6、避免使用通配符选择器;

7、使用多重选择器;

8、CSS Sprites技术

C、JavaScript项

1、使用临时变量(或数组)存放dom节点;

2、批量操作时,使用字符串拼接,用innerHTML开销更小,速度更快,同时内存也更安全;

3、减少dom访问,可以缓存已经访问过的元素,删除dom节点中不必要的节点(remove炽热的())和对象;

4、创建dom节点,在执行完 createElement 代码后,应该马上添加(append)到dom树中;

5、监听dom事件,监听父节点(事件冒泡)。

D、HTML项

1、避免使用iframe,因为它会导致页面的重绘;

2、减少节点数量;

3、避免重绘和回流,布局变化引起重绘,元素变化(内容、样式)导致回流;

E、资源项

1、图片

1-1、减少图片数量(CSS Sprites);

1-2、降低图片质量(减小图片大小);

1-3、选择适当的图片样式(jpg主要是摄影级照相类图像,gif主要是动画图片,png杜宇透明无损耗的小文件是不错的选择);

1-4、图片的转码Base64(src="data:image/jpg;base64,...");

2、避免使用flash,尽量用css3代替。

F、压缩工具

1、jsmin压缩代码,不会验证代码语法;

2、YUIcompressor 压缩时会验证语法,代码优化。

G、CDN(内容分发网络)

CDN的好处在于

1、不用担心自己网站访客,在任何时间、任何地点、任何网络运营商,都能快速打开网站;

2、各种服务器虚拟主机带宽等采购成本,包括后期运维成本都会大大减少;

3、给网站直接带来的好处:流量、咨询量、客户量、成单量。