yahoo性能团队

yahoo性能团队

http://developer.yahoo.com/performance/

前言：
对于一个高性能的Web站点，性能提升的2个主要突破点
.响应时间
.效率
当前集中考虑的主要是响应时间方面，平时我们关注比较多的是后台Web服务器端的优化，通过Yahoo的实际数据分析，80－90％的终端响应时间是由前端决定的，所以是前端的优化也是非常重要的，存在巨大的改善空间，本文集中讨论前端优化。8/2性能准则：80%的性能问题是由20%的原因引起的，我们集中精力在这20％的原因上来改善80%的性能。通常的经验告诉我们影响Web性能的几个主要因素由Cache的大小和有无，Http请求，静态和动态网页的分布，cookie的大小并行下等等，但是在具体的时间中到底如何去做，没有更多详细的探讨。从2004年起，yahoo专门成立了一个性能分析团队，他们通过开发实际工具和进行严格的数据分析，来改善他们那产品的性能。本文就是这些研究成果的最新总结，在提高网页速度方面Yahoo!的Exceptional Performance团队提供了14种最佳实践，减少了Yahoo!25%-50%的响应时间，本文将详细介绍这些准则和背后的原理，从而使你可以更快地构建网页，减少响应时间，从前端到后端全面挖掘网页开发更大的潜能！到底如何优化一个网站，提高性能了？基本的原则是:
（1）优化网站资源，主要是图片
（2）优化脚本资源，例如JavaScript
（3）优化网页的样式表，例如CSS
核心思想是减少下载的数据量，尽可能使用少的HTTP请求，合并脚本和CSS表，使用合并的图片，尽量避免重定向和frames的使用。

来自Yahoo的14条准则
由上述思想发散开发，总结起来yahoo的14条准则如下：

1.尽可能使用少的HTTP请求 Make fewer HTTP requests;

    这个是很重要的一条，具体措施是使用Image maps  和Inline Images；合并CSS和脚本代码。比如对于Image Maps
(服务器端)server-side
→
(客户端)client-side – preferred


(缺点是)drawbacks:
图片需要是连续的。

2.使用内容分发网络 Use a CDN；
  在发布你的动态内容之前发布网站的静态内容，比如使用广泛的Akamai
3.增加一个期限头部 Add an Expires header
  不仅仅是对图片设置，对于脚本和样式表同样需要设置，在Apache中具体的配置方法如下：
     ExpiresActive On
     ExpiresByType application/x-javascript "modification plus 2 years"
     ExpiresByType text/css "modification plus 5 years"
当你修改一个资源的时候，修改资源的名称(自动进行)，给文件名称加一个时间戳，例如img_1385413733.png；
同时候将资源纳入版本控制系统中，比如使用CVS个SVN，例如img_1.2.png。

4.压缩组件Gzip components
  当前90% 的浏览器都支持压缩，压缩不仅仅是指HTML，脚本，CSS和XML都可以压缩。
在Apache中修改下面的配置来支持压缩
Apache 2.x: mod_deflate
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript
对于HTTP请求和响应，表现如下
HTTP request： Accept-Encoding: gzip, deflate
HTTP response: Content-Encoding: gzip Vary: Accept-Encoding

5.将CSS置为页面的顶部 Put CSS at the top
   主要原因是CSS样式表会阻塞HTML在IE中的显示(如果没有下载完的话)
6.将JS移植页面的底部 Move JS to the bottom
  主要原因是脚本的执行会阻塞并行下载和阻塞其他元素在IE中的展示
7.避免使用CSS表达式 Avoid CSS expressions
 比如下面的例子：
   width: expression(
         document.body.clientWidth < 600 ?
       “600px” : “auto” );
原因是由于鼠标的移动，按下键等操作事件会是的上述表达式执行多次 
8. 是JS和CSS从外部包含  Make JS and CSS external
  可以减少HTML文档的大小，同时增加脚本的重用，但是会增加请求数
但是HomePage是一个例外，在Homepage中使用Inline和 PostOnload效果不错，yahoo和goolgede
首页都这样处理了；
9.减少DNS的查找 Reduce DNS lookups
  一个典型的DNS查询是20－120ms,DNS 查询的时间直接影响到并行下载的效率，尽量减少主机的域名数目。
常用浏览器的缓存时间设置如下：
IE
DnsCacheTimeout: 30 minutes
KeepAliveTimeout: 1 minute
ServerInfoTimeout: 2 minutes
Firefox
network.dnsCacheExpiration: 1 minute
network.dnsCacheEntries: 20
network.http.keep-alive.timeout: 5 minutes
Fasterfox: 1 hour, 512 entries, 30 seconds
10.精简JS Minify JS
  这个主要涉及到JS的编码和优化
11.避免重定向 Avoid redirects
  通常Web服务器返回的是3XX的状态码，常常是301和302，可以通过添加过期头来缓存重定向；
12. 移除重复的脚本 Remove duplicate scripts
    统计数剧表明20%的网站存在重复的脚本文件，这将直接影响HTTP请求的性能  
13.关闭ETags功能 Turn off ETags
    Web服务器返回的实体的唯一标识，主要应用在有条件的Get请求中。
    ETag: "c8897e-aee-4165acf0"
     Last-Modified: Thu, 07 Oct 2004 20:54:08 GMT
    If-None-Match: "c8897e-aee-4165acf0"
   If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMT
如果ETags不匹配，就不能发送304码，对于服务器之间一个单独的实体的ETag总是不同的。在Server和Client的格式分别
如下:
   Apache: inode-size-timestamp
   IIS: Filetimestamp:ChangeNumber
对于服务器多余一台机器的Site，很少返回304状态码。
14.是AJAX代码可缓存同时经可能小 Make AJAX cacheable and small
  XHR, JSON, iframe, 动态脚本 都是可以被缓存, 精简和压缩的：a personalized response should still be cacheable by that person。比如在Yahoo! Mail Beta中，由于XML标示的地址本是不会经常变动的，可以缓存它，将最后修改时间标记在URL中。
Web性能分析工具
1。IBM Page Detailer  详细信息参考：
2。Fasterfox 是Firefox的一个插件，可以详细统计一个网页的载入时间，http://fasterfox.mozdev.org/
3。LiveHTTPHeaders 是Firefox的一个插件，可以查看HTTP请求头  http://livehttpheaders.mozdev.org/
4。firebug 是Firefox的一个插件, 功能强大，可以多JS和CSS做分析

结论
  上面总结了Web优化的各种方法和背后的原因，主要集中在前端优化，这也是常常被我们忽略的，作为全球流量第一
的网站yahoo,我想他们的很多经验是值得我们借鉴的，在实践中可以根据具体情况和应用环境取舍。你对你最终用户的
响应时间是可以控制的！
原文来自：http://blog.csdn.net/ganghust/archive/2007/11/26/1903493.aspx