关于前端性能优化

相关推荐

关于前端性能优化

　　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。把多个请求合并成一个。