关于前端性能优化

热点
关注：2.4W次

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

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

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

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

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

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

yahoo前端性能团队总结的35条黄金定律请见：

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报文头，来控制网页的缓存。

ie优化

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

将cookie的大小减到最小。

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

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

c.文件压缩

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

② 减少请求的次数

a.文件适当的合并

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

b.雪碧图

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