YaHoo Web性能优化的14条法则(下)

继续更新14条法则后7条，对前端性能优化整体有个框架。

法则8. 把JavaScript和CSS放到外部文件中
上述很多性能优化法则都基于外部文件进行优化。现在，我们必须问一个问题：JavaScript和CSS应该包括在外部文件，还是在页面文件中？
在现实世界中，使用外部文件会加快页面显示速度，因为外部文件会被浏览器缓存。如果内置JavaScript和CSS在页面中虽然会减少HTTP请求次数，但增大了页面的大小。另外一方面，使用外部文件，会被浏览器缓存，则页面大小会减小，同时又不增加HTTP请求次数。
因此，一般来说，外部文件是更可行的方式。唯一的例外是内嵌方式对主页更有效，如Yahoo!和My Yahoo!都使用内嵌方式。一般来说，在一个session中，主页访问此时较少，因此内嵌方式可以取得更快的用户响应时间。

应用：
这一条与第一条法则需要结合起来找到最合适的点，更要注意一些浏览器兼容性的问题。

法则9. 减少DNS查询次数
DNS用于映射主机名和IP地址，一般一次解析需要20～120毫秒。为达到更高的性能，DNS解析通常被多级别地缓存，如由ISP或局域网维护的caching server，本地机器操作系统的缓存（如windows上的DNS Client Service），浏览器。IE的缺省DNS缓存时间为30分钟，Firefox的缺省缓冲时间是1分钟。
减少主机名可减少DNS查询的次数，但可能造成并行下载数的减少。避免DNS查询可减少响应时间，而减少并行下载数可能增加响应时间。一个可行的折中是把内容分布到至少2个，最多4个不同的主机名上。

应用：
这一点也与之前的HTTP SERVER调优 相似，主要是减少DNS寻址，最好利用DNS缓存来解决相应的问题,不过一定要注意DNS缓存安全:)

法则10. 最小化JavaScript代码
最小化JavaScript代码指在JS代码中删除不必要的字符，从而降低下载时间。两个流行的工具是#JSMin 和YUI Compressor。
混淆是最小化于源码的备选方式。象最小化一样，它通过删除注释和空格来减少源码大小，同时它还可以对代码进行混淆处理。作为混淆的一部分，函数名和变量名被替换成短的字符串，这使得代码更紧凑，同时也更难读，使得难于被反向工程。Dojo Compressor (ShrinkSafe)是最常见的混淆工具。
最小化是安全的、直白的过程，而混淆则更复杂，而且容易产生问题。从对美国10大网站的调查来看，通过最小化，文件可减少21%，而混淆则可减少25%。
除了最小化外部脚本文件外，内嵌的脚本代码也应该被最小化。即使脚本根据法则4被压缩后传输，最小化脚本刻减少文件大小5%或更高。

应用：
这一点与法则4的初衷是一样的。更精化了相应的代码。

法则11. 避免重定向
重定向功能是通过301和302这两个HTTP状态码完成的，如：

HTTP/1.1 301 Moved Permanently

Location: [url]http://example.com/newuri[/url]

Content-Type: text/html

浏览器自动重定向请求到Location指定的URL上，重定向的主要问题是降低了用户体验。
一种最耗费资源、经常发生而很容易被忽视的重定向是URL的最后缺少/，如访问[url]http://astrology.yahoo.com/astrology[/url]将被重定向到[url]http://astrology.yahoo.com/astrology/[/url]。在Apache下，可以通过Alias，mod_rewrite或DirectorySlash等方式来解决该问题。

应用：
我们可以使用相应的HTTP SERVER调优 来进行重定向。

法则12. 删除重复的脚本文件
在一个页面中包含重复的JS脚本文件会影响性能，即它会建立不必要的HTTP请求和额外的JS执行。
不必要的HTTP请求发生在IE下，而Firefox不会产生多余的HTTP请求。额外的JS执行，不管在IE下，还是在Firefox下，都会发生。
一个避免重复的脚本文件的方式是使用模板系统来建立脚本管理模块。除了防止重复的脚本文件外，该模块还可以实现依赖性检查和增加版本号到脚本文件名中，从而实现超长的过期时间。

应用：
脚本管理一直是前端的问题，使用相应框架可以解决类似的问题。

法则13. 配置ETags
ETags是用于确定浏览器缓存中元素是否与Web server中的元素相匹配的机制，它是比last-modified date更灵活的元素验证机制。ETag是用于唯一表示元素版本的字符串，它需被包括在引号中。Web server首先在response中指定ETag：

HTTP/1.1 200 OK

Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT

ETag: “10c24bc-4ab-457e1c1f”

Content-Length: 12195

后来，如果浏览器需要验证某元素，它使用If-None-Match头回传ETag给Web server，如果ETag匹配，则服务器返回304代码，从而节省了下载时间：

GET /i/yahoo.gif HTTP/1.1

Host: us.yimg.com

If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT

If-None-Match: “10c24bc-4ab-457e1c1f”

HTTP/1.1 304 Not Modified

ETags的问题在于它们是基于服务器唯一性的某些属性构造的，如Apache1.3和2.x，其格式是inode-size-timestamp，而在IIS5.0和6.0下，其格式是Filetimestamp:ChangeNumber。这样同一个元素在不同的web server上，其ETag是不一样的。这样在多Web server的环境下，浏览器先从server1请求某元素，后来向server2验证该元素，由于ETag不同，所以缓存失效，必须重新下载。
因此，如果您未用到ETags系统提供的灵活的验证机制，最好删除ETag。删除ETag会减少http response及后续请求的HTTP头的大小。微软支持文章描述了如何删除ETags，而在Apache下，只要在配置文件中设置FileETag none即可。

应用：
自定义ETag的生成策略，以尽量减少探头规则的生成次数。

法则14. 缓存Ajax
性能优化法则同样适用于web 2.0应用。提高Ajax的性能最重要的方式是使得其response可缓存，就象“法则3增加Expires Header” 讨论的那样。以下其他法则同样适用于Ajax，当然法则3是最有效的方式:
法则4. 压缩页面元素
法则9. 减少DNS查询次数
法则10. 最小化脚本文件
法则11. 避免重定向
法则13. 配置ETags.

应用：
为Ajax请求附加时间戳而不使用缓存。

前端的性能调优将对用户体验度带来极大的影响。但性能的提高需要从设计等角度权衡衡量，这样才能找到最合适自己web site的性能调优方案。

———EOF———

作者： 吴颖敏 | www.futurehandw.com
Email: [e-mail]
转载请注明来源：吴颖敏 - www.futurehandw.com