转：网站前端性能优化

继前面几篇文章后再来讲说老生常谈的话题，怎么样提高前端性能。文中不少取材自网络及《High Performance Web Sites》，并根据本身工做中所接触到的知识整理而成。

 

1. 减小HTTP请求

终端用户响应时间80%消耗在前端，而大部分时间都是在下载页面的资源：图片，脚本，flash等等，减小请求资源简化页面设计成为了性能提高的关键。尽可能合并CSS、JS及图片文件，减小HTTP请求。

 

2. 使用内容分发机制

使用内容分发如CDN加速，使用户从离本身最近的服务器下载文件。但通常要求减小DNS查询次数，如同一个页面的请求资源尽可能少的使用不一样的主机名，能够减小网站并行下载的数量。但不少网站为了加速下载资源特地用了多个主机名，这样能够并行下载资源。在低版本的浏览器IE6,7中并行链接数为4个，高版本的IE8及以上以及如今较新版的chrome，firefox等浏览器都是6个。通常CSS,JS及图片资源均经过CDN加速，而且使用多个主机名来实现并行下载。

 

3. 设置header的过时时间，使内容能够缓存

这个规则能够从两个方面来看：

对于静态组件，实现“永不过时”的政策，经过设置一个较长时间的Expires头，例如图片，flash；

对于动态组件：使用适当的Cache-Control头来处理不一样的请求，如CSS,JS等。

对于第一次访问网站的用户来讲，图片资源等都是固定不变的，设置为永不过时的Expires头能够在客户端缓存，减小服务端的负载以及请求数量，而JS，CSS资源能够设置一个适当的过时时间。

 

可是实际上咱们会遇到一个挑战：若是版本更新致使原来的CSS或JS有改动，如何确保终端用户是下载的最新的资源文件呢？

 

最最经常使用的一种方法，就是每次有改动时生成一个tag而后加在文件名称中，若是有修改文件名就会不一致，客户端就会强制获取最新的资源文件，amazon，google等都是这么处理的；固然还有一种办法就是在资源文件目录上打上tag，可是有一种弊端就是对于没有更改的文件客户端也会从新下载对应的资源，若是对于发布较为频繁的web项目，用户在首次访问时就比较耗性能。

 

4. 使用Gzip压缩内容

服务端能够把不仅是html还有JS，CSS，XML等一切文本的响应都进行压缩，减少传输的大小

 

5. 样式放在页头

用户在打开一个页面时，浏览器会逐步的加载头部，导航栏及logo等，在加载过程当中用户能看到页面的反馈，提高了用户体验。若是样式放在页脚，带来的问题是，包括在IE的不少浏览器上禁止逐步呈现，他们会阻止渲染，避免页面样式变化而引发重绘页面元素，用户就只能看到一个空白页。

 

6. JavaScript放在页脚

相对于CSS而言，JS提倡放在页脚加载避免阻碍其余资源的并行下载，对于内容性质的网站，将内容的HTML放在相对靠前的位置，而对于交互较多的网页，须要把特别重要的核心组件的JS剥离往前放，而不过重要的则在最后加载。更详细的关于Javascript的加载请查看上一篇文章：《从两个bug来看网页内容的装载》

 

7. 避免使用CSS表达式

CSS表达式计算会很是频繁，不只仅是在渲染和resize时会执行，滚动页面甚至移动鼠标都会从新计算。

 

8. 外部引用JavaScript和CSS

若是经过引用外部JavaScript和CSS的形式，由于浏览器会缓存这些资源，下次访问时可使得页面加载更快，而若是将它们写在HTML中每次访问页面时都会再次加载。

 

9. 减小DNS查询

这点与第2点有类似之处，须要作的就是在减小DNS查询次数与并发下载之间作好平衡。

 

10. 精简JavaScript和CSS

删除JS和CSS中的空白换行，注释等，使用混淆把JS中的长变量换成短变量，能够缩小他们的体积，减小请求数据所占用的网络带宽.

 

11. 避免重定向

除了在header中人为的重定向以外，网页重定向常在不经意间发生，被重定向的内容将不会使用浏览器的缓存。好比用户在访问www.xxx.com，服务器会经过301转向到www.xxx.com/，在后面加了一个“/”。若是服务器的配置很差，这也会给服务器带来额外的负担。经过配置apache的 alias或使用mod_rewrite模块等方法，能够避免没必要要的重定向，而在ngingx中也能够直接配置rewrite规则。

 

12. 删除重复的脚本

在页面中重复的脚本会增长性能压力，美国20%的热门网站中都包含有重复的脚本，团队规模和脚本数量增长了出现重复脚本的概率。在IE中，包含重复的JS脚本会致使浏览器的缓存不被使用，同时增长没必要要的请求（仅在IE，FF下不会出现重复的请求）和重复的脚本执行（在IE和FF下都会重复执行）。

 

13. 配置ETags

ETag是一种服务器和浏览器用于识别请求的浏览器已缓存的资源是否与服务端匹配的机制，比last-modified更灵活，能更加精确的知道文件是否被修改过，由于If-Modified-Since只能检查秒级的修改，而ETag是一个惟一的字符串，不会受到修改时间的限制。

 

顺便说说浏览器访问URL时的工做机制：

a. 第一次访问url时，用户从服务器段获取页面内容，并把相关的文件（images,css,js…）放在高速缓存中，也会把文件头中的expired time,last modified, ETags等相关信息也一同保留下来。

b. 用户重复访问url时，浏览器首先看高速缓存中是否有本站同名的文件，若是有，则检查文件的过时时间；若是还没有过时，则直接从缓存中读取文件，再也不访问服务器。

c. 若是缓存中文件的过时时间不存在或已超出，则浏览器会访问服务器获取文件的头信息，检查last modifed或ETags等信息，若是发现本地缓存中的文件在上次访问后没被修改，则使用本地缓存中的文件；若是修改过，则从服务器上获取最新版本。

 

14. 使Ajax可缓存

Ajax若是使用POST请求的话，浏览器一般会假定用户是提交数据给服务端的，因此天然不会缓存，由于有数据提交就意味着服务端要所处理，而get形式的Ajax请求却能够缓存，若是对安全性没有特别高要求的可使用get形式的Ajax请求。

 

15. 减小DOM节点，加速页面渲染

 

16. 避免404错误

 

17. 减小Cookie的大小，静态资源使用无cookie的域，客户端请求它们的时候，减小 Cookie 的反复传输对主域名的影响。Yahoo!使用yimg.com,YouTube使用ytimg.com.Amazon使用images-amazon.com

 

18. 避免频繁操做DOM节点，过多的操做还可能致使浏览器死机，听说以前twitter就由于在windows.scroll事件的操做中绑定了过多的dom操做而致使浏览器死机

 

19. 用LINK而不用@import方式导入样式

 

20. 给图片加上正确的宽高值，以减小页面重绘，同时能够防止图片缩放

 

21. 缩小favicon.ico并缓存，不少时候开发者都会忽略这个文件，可是每当有用户收藏网站/网页时，浏览器会自动请求这个文件，就算这个图标文件没有在你的网页中明显说明，浏览器也会请求，若是不添加就会出现404.

 

使用工具：

目前有一些工具能够用来作性能分析，并依据以上法则给出优化建议，值得咱们使用，常见的工具以下：

Yslow: 雅虎针对前端网站优化提出了23条准则，同时开发了网页性能分析浏览器插件；

PageSpeed：是google推出的性能分析工具

dynaTrace: 是基于IE的分析工具