Yahoo Yslow 团队提高 Web 性能的 14 条法则

YahooYslow团队提高Web性能的14条法则

01.MakeFewerHTTPRequests

减少少HTTP请求（整合多个分开的CSS/JavaScript）

02.UseaContentDeliveryNetwork

使用CDN

03.AddanExpiresHeader

加入ExpiresHeader（过期时间标记头）到Image、CSS、JavaScript档案里

04.GzipComponents

页面使用gzip压缩HTML、JavaScript、StyleSheet、XML、JSON，但切记“不要压缩Images，PDF档案”

05.PutCSSattheTop

样式代码css置于页面顶部head标签中，使用<LINK>标签，不要使用@import语法。

避免样式改变引起的页面元素重绘。

link是一个html标签，而@import是一个css标签，

06.MoveScriptstotheBottom

脚本语言script置于页面底部最下方</body>之前，所有在JavaScript加载以下的HTML在JS还没读完前，都不会显示画面。

把JavaScript的代码都放在onload执行。

07.AvoidCSSExpressions

避免使用CSSexpressions，可能这段expression会在每一次mousemove、resize、scroll、keypress时执行，使用js来完成相应的功能。

expression是CSS中的行为，IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。

微软IE官方博客报道：IE8标准模式下将不再支持CSS的expression功能。

08.MakeJavaScriptandCSSExternal

JS跟CSS独立出文件比较好，首页除外。

使用Post-onloaddownload技巧（downloadexternalfilesafteronload）

window.onload=downloadComponents;

functiondownloadComponents(){

varelem=document.createElement("script");

elem.src="http://.../file1.js";

document.body.appendChild(elem);

...

}

在Server-side判断使用者Browser是否有设定Cookie["hasPostOnloadDownload"]，

若没有，就使用post-onloaddownload动态下载CSS&JS；

若有用，就直接用<scriptsrc="xxxx.js"></script>下载，Browser会抓取Cache的版本。

09.ReduceDNSLookups

在一个页面中，不要使用过多地不同域名解析，建议不要超过2-4个，不然会降低页面载入速度。

开启Keep-Alive支援，在pv不是很高时可以加快客户访问的速度，因为不需要三次握手，pv>120万时就不要使用了，有可能导致服务器一直TIMEWAIT而无响应。

10.MinifyJavaScript

减小Javascript。可以使用工具减少代码量，可以被浏览器更快的下载。

相关工具：

jsmin:http://crockford.com/javascript/jsmin

　　下载后更名成jsmin.zip解压缩出jsmin.exe即可执行：jsmin.exe<input.js>output.js（注意：所有UTF-8编码的js档会变成ANSIasUTF-8编码）

dojocompressor:http://dojotoolkit.org/docs/shrinksafe

11.AvoidRedirects

避免重定向：

网址若省略文件时，最后面一定要加上/结尾

追查Log档查看LogReferer。

12.RemoveDuplicateScripts

移出代码中重复的脚本语言。

13.ConfigureETags（TurnoffETags）

Etags是Web服务器返回的实体的唯一标识，主要应用在有条件的Get请求中，如果ETags不匹配，就不能发送304码。

对于服务器之间一个单独的实体的ETag总是不同的，对于服务器多余一台机器的Site，很少返回304状态码，所以多台前端服务器时要关闭ETags选项。

ETagformat：

Apache:ETag:inode-size-timestamp

IIS:ETag:Filetimestamp:ChangeNumber

14.MakeAjaxCacheable

XHR、JSON、iframe、动态脚本都是可以被缓存，精简和压缩的，这些不会经常变动的内容，可以缓存它，将最后修改时间标记在URL中。

提高Web性能的14条法则（详细版）

http://www.cnblogs.com/csharp/archive/2008/08/27/high_performance_web_sites_14_rules.html

CSS中的行为——expression

http://www.blueidea.com/tech/site/2006/3705.asp

IE8将不再支持CSS中的expression

http://www.cnblogs.com/JustinYoung/archive/2008/10/17/ending-expressions.html

Dojo的压缩

http://pigdogyourmother.ycool.com/post.1684294.html

提高基于Dojo的Web2.0应用程序的性能

http://www.ibm.com/developerworks/cn/web/wa-lo-dojo-perf/

常见的HTTP状态代码及其原因

http://leeqianjun.javaeye.com/blog/266866

使用ETags减少Web应用带宽和负载

http://www.infoq.com/cn/articles/etags

http://liudaoru.javaeye.com/blog/211975