《高性能网站建设指南》学习笔记——前端性能优化准则

 

《高性能网站建设指南》学习笔记

该书没有深入js或html代码本身的逻辑，而是从性能优化角度讲述了性能测试人员能够关注和实施的一些性能优化实践。书中介绍的14条前端性能优化规则，即是雅虎Yslow所采用的14条评分准则，各准则中有借鉴意义的几条记录如下：

1 前端性能优化规则

1.1减少http请求

由于浏览器http请求并发连接数的限制，在同一个域名下同时能建立的http连接有限，也即如有一个页面中有6个图片，而浏览器请求并发连接数为2，那么需要建立6次的http请求，而且只能等1，2个请求完成之后，才能进行第3，4个图片的下载。影响速度。除图片外，js文件和css文件也有类似问题，能合并的尽量合并，以减少建立与释放连接的时间。而且js文件下载时，由于浏览器不知道该js是否会改变页面显示，因此会阻塞其它下载的任务，使浏览器并发能力无法得到利用。

减少请求的方式有：合并脚本和样式表、CSSSprites、内联图片等方式。

 

1.2使用内容发布网络

根据不同的地理位置增设服务器以加快网络访问。

 

1.3添加Expires头

充分使用浏览器缓存，设置文件过期时间。设置了Expires头的内容在过期前浏览器不会从服务器端重新下载。

1.4压缩组件

对传输的内容采用gzip压缩，可以显著减少传输时间。尤其是文件较大的js文件、css样式表压缩能收到显著的效果。

1.5将css样式表放在页面顶部

可以达到逐步呈现的效果，不至于白屏。

1.6将js脚本放在页面底部

将脚本放在页面的底部，可以有效防止对页面其它组件的阻塞。

1.7精简js

不是压缩，而是把js的空格，空行和注释等去掉。对于稳定的js类库，建议采用这种方法精简，有工具可用，精简后可减少10%—20%的文件大小；对于开发中的js代码，不建议精简，因为浏览器端可读性差会导致debug时不容易定位问题。

1.8配置E-tag

通常E-tag的主要问题在于：在不同的集群机器上，E-tag的计算方法可能会导致不同机器上同样文件的E-tag不相同，使文件再次被下载，失去了缓存的意义。

2 易于实践使用的一些前端改善实践

1.压缩js，css，可减少50%以上的js文件大小

2.精简js，可减少10%以上的js文件大小

3.合并js，相当一部分js文件是否可以合并？所有页面优化工作量太大，不过对某几个可能存在性能问题的页面可采取这一方法，如portal页面。

4.合并图片，采用sprint方式，将多张图片合并为一张，避免反复下载多个图片【有一定工作量，sprint合并图片，偏移量等是精细活】

 

3 几个前端性能相关工具的简述

1.YSlow，主要功能是根据一些准则评分，如上面提到的8条规则，并提出建议！

2.page speed与yslow类似，Google的20条准则进行评分及建议！

3.showslow用来显示yslow，page speed或dynatrace所得的结果！需要搭建一个服务器，并在Firefox中配置Yslow结果的发送服务器URL等。

http://ued.taobao.com/blog/2010/07/07/xvfb_yslow_showslow-2/

4.dynatrace是一款商业软件，其Ajax Edition可用来分析热点函数的执行情况等。可跟踪浏览器在时间轴上几乎所有的重绘和js事件情况！

5.selenium 采用植入js的方式来驱动浏览器，用IDE工具录制脚本，然后生成Java、Ruby或Python等客户端语言，这些语言发请求给Selenium Remote Control【要启动一个服务，这个服务用来监听客户端语言的请求，驱动浏览器并返回结果】，Remote Control会在启动浏览器时植入一个js文件，从而达到控件浏览器的目的。

6.WebDriver与Selenium相比不需要启动服务，也不需要植入JS文件，可直接操作浏览器。提供了Java及C#形式的脚本。WebDriver与Selenium都可用来做UI自动化，Selenium基于JS，无法控制非JS的控件，如Windows本地窗口。IE的UI自动化可用Ruby+Windows OLE对象方式驱动，对FireFox，可用的是扩展FF插件的方式，使FF启动时加载相应的JS文件，启动WebDriver监听程序，监听程序做两件事：一是将调用者的请求转发给FF浏览器进行操作；二是将浏览器的结果封装后返回给调用者。