WEB性能优化

作为一个前端工作人员，我们不可避免要进行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可以提高代码的重用性；

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、给网站直接带来的好处：流量、咨询量、客户量、成单量。