大规模、高流量互联网站性能调优经验总结

前言：
对于一个高性能的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
<a href="navbar.cgi"><img ismap src="imagemap.gif"></a>→ http://.../navbar.cgi?127,13
(客户端)client-side – preferred
<img usemap="#map1" border=0 src="/images/imagemap.gif">
<map name="map1">  <area shape="rect" coords="0,0,31,31" href="home.html" title="Home">
   …
</map>
(缺点是)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  详细信息参考：http://alphaworks.ibm.com/tech/pagedetailer
2。Fasterfox 是Firefox的一个插件，可以详细统计一个网页的载入时间，http://fasterfox.mozdev.org/
3。LiveHTTPHeaders 是Firefox的一个插件，可以查看HTTP请求头  http://livehttpheaders.mozdev.org/
4。firebug 是Firefox的一个插件, 功能强大，可以多JS和CSS做分析 http://getfirebug.com/

以下几点是新增的准则，还没有正式公布，所以大家要注意，转载本文时，请务必注明出处—http://icyriver.net/?p=26。

15。Flush the Header

（先发送Header里的信息）

We improved the page load times by flushing the apache output buffer after the document HEAD was generated.This had two benefits.

First, the HEAD contains SCRIPT and LINK tags for scripts and stylesheets. By flushing the HEAD, those tags are received and parsed by the browser sooner, and in turn the browser starts downloading those components earlier.

Second, the HEAD is flushed before actually generating the search results. This is a win for any property doing a significant backend computation or especially making one or more backend web service calls.

16。Split Static Content Across Multiple Hostnames

（把较大的静态文件分割成不同域的请求）

If you have many (10 or more) components downloaded from a single hostname, it might be better to split those across two hostnames.

17。Reduce the Size of Cookies

（不要让Cookie内容过大）

Reduce the amount of data in the cookie by storing state information on the backend, and abbreviating names and values stored in the cookie. Set expiration dates on your cookies, and make them as short as possible.

18。Host Static Content on a Different Top-Level Domain

（把静态文件放在不同的顶级域名下）

19。Minify CSS

（Css代码压缩）

20。Use GET for XHR

（有XHR时使用GET请求）

Iain Lamb did a deep study of how using POST for XMLHttpRequests is inefficient, especially in IE. His recommendation: “If the amount of data you have to send to the server is small (less than 2k), I suggest you design your webservice / client application to use GET rather than POST。

21。Avoid IFrames

（尽量避免使用IFrame）

Don’t use SRC (set it via JS instead). Each IFrame takes 20-50ms, even if it contains nothing

22。Optimize images

（优化图片）

 注:本文转载于网上