浅谈前端性能优化

1、什么是前端性能优化？

从用户访问资源到资源完整展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。

 

2、为什么要做前端性能优化？

在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很多不利于网站访问速度的因素会产生，从而严重影响网站的性能，导致网站访问速度变慢，用户体验低下，最终导致用户流失。

 

3、如何进行前端性能优化

性能黄金法则：只有10%-20%的最终用户响应时间花在接收请求的HTML文档上，剩下的80%-90%时间花在HTML文档所引用的所有组件(图片，script，css，flash等等)进行的HTTP请求上。

yahoo前端性能团队总结的35条黄金定律请见：http://blog.csdn.net/zhouziyu2011/article/details/60468287

1) 内容层面

①　DNS解析优化

DNS缓存、减少DNS查询次数（减少来自不同domain的请求的数量）；

②　避免重定向

重定向至少访问两个不同地址，会减慢访问速度；

③　杜绝404

404代表服务器没有找到资源，网页中需要加载一个外部脚本，结果返回一个404，不仅阻塞了其他脚本下载，客户端还会将下载回来的内容(404)当成JavaScript去解析。

2) 网络传输阶段

①　减少传输过程中实体的大小

a. 缓存：添加Expires 或Cache-Control报文头

对一个网站而言，CSS、JavaScript、图片等静态资源文件更新的频率都比较低，而这些文件又几乎是每次http请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能。通过设置http头中的cache-control和expires的属性，可设定浏览器缓存，添加Expires报文头，将静态内容设为永不过期，或者很长时间后才过期；添加Cache-Control报文头，来控制网页的缓存。

b. cookie优化

去除没有必要的cookie，如果网页不需要cookie就完全禁掉。

将cookie的大小减到最小。

注意cookie设置的domain级别，没有必要时不要影响到sub-domain

设置合适的过期时间，较长的过期时间可以提高响应速度。

c. 文件压缩

Accept-Encoding：g-zip，Gzip压缩传输文件通常可以减少70%网页内容的大小，包括脚本、样式表、图片等文件。

②　减少请求的次数

a. 文件适当的合并

将多个JS脚本文件合并成一个文件，将多个CSS样式表文件合并成一个文件，以此来减少文件的下载次数。

b. 雪碧图

把小图标合成一张大图，通过给元素的公共css设置background-image为该合成图，这样每个元素都会以该合成图为背景，而且页面也只加载一张合成图，然后再给每个元素单独微调其background-position。把多个请求合并成一个。

③　异步加载

通过async和defer关键字或动态创建<script>标签，可以让脚本异步执行。

3) 渲染阶段

①　js放底部，CSS放顶部

将js脚本置底，可以让网页渲染所需要的内容尽快加载显示给用户。

浏览器在CSS全部传输完全之前不会去渲染任何的东西，将CSS放在文档顶部能使页面加载得更快。

②　减少重绘和回流

重绘和回流会延长网页的加载时间。减少重绘和回流的方法有：将多次改变样式属性的操作合并成一次操作。

③　减少DOM节点

④　网页中元素过多对网页的加载和脚本的执行都是沉重的负担，因此要减少DOM元素的数量。

4) 脚本执行阶段

①　减少节点的操作（innerHTML）

避免多次操作节点，构建好后再一次性添加到文档中去，而不是循环添加每一行

②　事件委托

采用事件委托机制，在父级元素上添加一个事件监听，来替代在每一个子元素上添加事件监听。