使用Google Page Speed优化Web前端性能

安装步骤：http://jingyan.baidu.com/article/597035523c54cd8fc00740ed.html

安装好之后，打开Firebug，能够看到新增的标签页：Page Speed：

使用Page Speed

其中，Page Speed标签页包括两个功能：Analyze Performance与Show Resources，其中Analyze Performance是Page Speed的核心功能。点击之后Page Speed开始工做，几秒钟之后就会得出一份详细的性能分析报告：

Page Speed分析报告

其中各项按照重要性进行排序，展开每一部分，能够获得详细的报告。其中，红色图标表示未进行优化，黄色表示能够进行进一步优化，绿色表示已经进行优 化。

其他部分的功能能够在Google Code的官方主页上找到，这里就不赘述了，只重点介绍Analyze Performance这一功能。

性能优化技巧

其实上图的每一项都是Page Speed提供的优化标准，Page Speed就是按照这一条条标准进行分析的。须要拿出来说的包括：

使用gzip压缩

这里放在第一，是性能优化效果最显著的一步。所谓gzip压缩是一种开发的压缩算法，目前的主流浏览器(Firefox, Safari, Chrome, IE4及以上)与主流服务器(Apache, Lighttpd, Nginx)均对其有很好的支持。gzip压缩是经过HTTP 1.1协议中的Content-Encoding : gzip来进行标记说明，其能够明显减小文本文件的大小，从而节省带宽和加载时间。我作过的一个实验，发现启用gzip后，jquery 1.2.6 minify版本的大小从54.4k减小到16k，减小了70%。gzip适用的状况包括：

• HTML\CSS\JavaScript文件，gzip算法对于文本文件的效率比较高，而jpg/gif/png/pdf等二进制文件自己已经进 行了一次压缩，再使用gzip的成效已经不明显了。并且gzip压缩须要消耗服务器的资源，而解压缩须要消耗浏览器的资源，对于比较大的二进制文件具备非 常高的性能消耗；
• 尽可能使用一种大小写方式，要么所有大写，要么所有小写。学过数据结构和算法的同窗必定知道压缩其自己就是对冗余信息熵进行压缩，如何数据原素的类 型种类太多，其信息冗余度会下降，从而压缩率下降；
• 太小的文件(一般小于150个字节)不宜进行gzip压缩，由于gzip会在文件头加入相关信息，对于小文件反而会增长文件的长度；

关于各服务器如何启用gzip，能够参加相关文档说明。

如何检查gzip是否启用？使用Firebug，在Net模块中进行检查HTTP Header是否有Content-Encoding gzip标记，参见下图：

gzip压缩检查

最小化JS和图片

对于JavaScript文件自己具备很是大的优化空间。所谓JavaScript压缩，就是经过一些工具将函数、变量名进行优化(其实就是尽量 缩短变量名长度)，消除多余字符(好比空格、换行符、注释等)，最终获得的代码能够在分析和执行上获得性能提高。压缩后获得的代码对于机器而言是可读的， 对于人来讲就不行了，由于文件内容已经面目全非。因此压缩通常用于生产期的代码，不能使用于开发期。

一样的道理，图片内容中也有必定的冗余信息，好比文件头部的一些内容描述(这些内容在jpg)图片上尤为如此。经过必定的工具(好比GIMP)能够 去除这些信息，从而节省必定的空间。

幸运的是，Page Speed已经内置了这些功能，咱们不须要找第三方的工具。以下图所示，能够看到对JS文件进行最小化能够获得的预期效果：

JavaScript最小化

好比jquery.form.js，最小化后减小11.9kb，减小54.8%的空间。点击minified version，在新窗口中能够看到Page Speed为你优化好的版本，直接更新到服务器就能够了。

关于图片优化，操做方法同上。

启用浏览器缓存

这是常用的方法。当请求的资源在浏览器本地获得缓存后，第二次请求这些内容就能够从直接缓存中取出，减小了连线的HTTP请求。

HTTP 1.1提供的缓存方法主要有两种：

• Expires and Cache-Control: max-age. 即内容在缓存中的生命有效期。第一次请求后，在生命有效期以内的后期请求直接从本地缓存中取，不过问服务器；
• Last-Modified and ETag. 其中Last-Modified标记文件最后一次修改的时间，浏览器第二次请求是在头部加入上次请求缓存下来的Last-Modified时间，如何两次 请求期间服务器的内容没有进行修改，服务器直接返回304 Not Modified，浏览器接到之后直接使用本地缓存。不然，服务器会返回200以及更新后的版本。ETag是服务器对于文件生成的Hash散列，其生成算 法与最后一次修改的时间相关。浏览器第二次请求发送上次的ETag信息，服务器经过简单的比对就知道是否应该返回304仍是200。

关于各缓存头部的设置能够参考各服务器的相关文档。

JavaScript延迟加载

一般浏览器在解析HTML时遇到JS文件会先下载，解析执行后才会下载后面的内容，期间天然会形成必定的延时。为了提升性能，尽量将JS文件的位 置后移，若是可能，还能够经过部分代码进行异步加载。另外，对于JS和CSS在必须放置在一块儿状况，须要报JS放置在CSS以后，这样CSS与JS文件可 以同步下载。

文件拼接

这里主要包括JS/CSS等文本文件和图片。对于文本文件，尽量将同一类型放置到一个文件中，减小HTTP请求。对于CSS背景图片，可使用 Sprit技术将图片拼接到一块儿，而后使用background-position属性选择对应的图片。Google首页上的这个图片就是一个很好的例 子：

Google Sprite

其它

更多优化规则，能够参考Page Speed的说明以及Steve Souders我的主页上的相 关信息。

结论

虽然如今网络速度愈来愈快，Web前端优化仍然很是重要；永远不要假设用户的网络速度 和你同样快，毕竟因为ISP的各方面缘由，各地的速度大不相同。良好的策略能够在有限的带宽资源下达到最大的性能发挥。

这个世界须要丰富的Web应用，更加须要高效的Web应用。