一、Make Fewer HTTP Requests （尽可能减少http请求数）
http请求是要开销的，减少请求数可以提高网页加载速度。常用的方法，合并css，js以及 Image maps和css sprites等。（css sprites是指只用将页面上的背景图合并成一张，然后通过background-position来取背景。）
更多请参考《【Web优化】Yslow优化法则（一）最小化HTTP请求数》
二、Use a Content Delivery Network （使用CDN 内容分发网络)
通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的 cache服务器内，通过DNS负载均衡(可选根据时间或访问速度来决定访问哪台服务器资源)的技术，判断用户来源就近访问cache服务器取得所需的内容。这样可以有效减少数据在网络上传输的时间，提高速度。
更多请参考《【Web优化】Yslow优化法则（二）使用CDN》
三、Add an Expires Header（添加Expires/cach-control头）
现在越来越多的图片，脚本，css，flash被嵌入到页面中，当我们访问他们的时候势必会做许多次的http请求。其实我们可以通过设置 Expires header来缓存这些文件。Expire其实就是通过header报文来指定特定类型的文件在览器中的缓存时间。大多数的图片，flash在发布后都是不需要经常修改的，做了缓存以后这样浏览器以后就不需要再从服务器下载这些文件而是而直接从缓存中读取，这样再次访问页面的速度会大大加快。
不过期间也有过问题，特别是对于脚本过期时间的设置还是应该仔细考虑下，不然相应的脚本功能更新后客户端可能要过很长一段时间才能“感知”到这样的变化。所以，哪些应该缓存，哪些不该缓存还是应该仔细斟酌一番。
关于此的更多内容请参考《【Web优化】Yslow优化法则（三）添加缓存控制首部》
四、Gzip Components（启用gzip压缩）
Gzip的思想就是把文件（ html ,php, js, css, xml, txt…）先在服务器端进行压缩，然后再传输。这样可以显著减少文件传输的大小。传输完毕后浏览器会重新对压缩过的内容进行解压缩，并执行。
五、Put Stylesheets at the Top(将css放在页面最上面)
无论是HTML还是XHTML还是CSS都是解释型的语言，而非编译型的，所以CSS到上方的话，那么浏览器解析结构的时候，就已经可以对页面进行渲染，这样就不会出现，页面结构光秃秃的先出来，然后CSS渲染，页面又突然华丽起来，这样太具有“戏剧性”的页面浏览体验了。
我们发现把样式表移到HEAD部分可以提高界面加载速度，因此这使得页面元素可以顺序显示。
在很多浏览器下，如IE，把样式表放在document的底部的问题在于它禁止了网页内容的顺序显示，浏览器阻止显示以免重画页面元素，那用户只能看到空白页了，Firefox不会阻止显示，但这意味着当样式表下载后，有些页面元素可能需要重画，这导致闪烁问题。
HTML规范明确要求样式表被定义在HEAD中，因此，为避免空白屏幕或闪烁问题，最好的办法是遵循HTML规范，把样式表放在HEAD中。
对此，马海祥的建议是：目前还没有碰到把样式表放在文档后面的情况吧？
六、Put Scripts at the Bottom（将script放在页面最下面）
将脚本放在页面最下面的目的有那么两点： 1、因为防止script脚本的执行阻塞页面的下载。在页面loading的过程中，当浏览器读到js执行语句的时候一定会把它全部解释完毕后在会接下来读下面的内容。 所以放在页面最后，可以有效减少页面可视元素的加载时间。 2、 脚本引起的第二个问题是它阻塞并行下载数量。
七、Avoid CSS Expressions（避免在css中使用表达式）
CSS表达式是功能强大的(同时也是危险的)用于动态设置CSS属性的方式，IE从版本5开始支持CSS表达式，如backgourd-color: expression((new Date()).getHours()%2?”#B8D4FF”:”#F08A00”)，即背景色每个小时切换一次。
CSS表达式的问题是其执行次数超过大部分人的期望，不仅页面显示和resize时计算表达式，而且当页面滚屏，甚至当鼠标在页面上移动时都会重新计算表达式。其实大部分可以用js实现。
八、Make JavaScript and CSS External（把javascript和css都放到外部文件中）
上述很多性能优化法则都基于外部文件进行优化，现在，我们必须问一个问题：JavaScript和CSS应该包括在外部文件，还是在页面文件中？
在现实世界中，使用外部文件会加快页面显示速度，因为外部文件会被浏览器缓存，如果内置JavaScript和CSS在页面中虽然会减少HTTP请求次数，但增大了页面的大小。
另外一方面，使用外部文件，如果已经被浏览器缓存，则页面大小会减小，同时又不增加HTTP请求次数。
因此，一般来说，外部文件是更可行的方式，唯一的例外是内嵌方式对主页更有效，如Yahoo!和My Yahoo!都使用内嵌方式，一般来说，在一个session中，主页访问此时较少，因此内嵌方式可以取得更快的用户响应时间。
对此，马海祥的建议是：ext2的代码作了很好的引导，目前前端开发人员都非常注意客户端模块的封装、重用，尽量以外部JS的方式提高代码的重用度，当然也要注意不要引入过多的外部资源，因为这违反了法则1。
目前CSS的封装也不错，但是主要是针对IE系列的解决方案，可以考虑引入YAML、blueprint等CSS框架，轻松解决浏览器兼容性问题。
另外，马海祥要提醒大家一点：把JavaScript和css文件放到外部，并不内嵌于网页，同时可以考虑把样式表放到头上把脚本文件放到底部。需要注意的是尽量不要使用css的表达式，他很容易让浏览器出现假死。
九、Reduce DNS Lookups（减少DNS查询）
在Internet上域名与IP地址之间是一一对应的，域名（kuqin.com）很好记，但计算机不认识，计算机之间的“相认”还要转成ip地址。在网络上每台计算机都对应有一个独立的ip地址。在域名和ip地址之间的转换工作称为域名解析，也称DNS查询。一次DNS的解析过程会消耗20-120毫秒的时间,在dns查询结束之前，浏览器不会下载该域名下的任何东西。所以减少dns查询的时间可以加快页面的加载速度。yahoo的建议一个页面所包含的域名数尽量控制在2-4个。
十、Minify JavaScript（压缩 JavaScript）
最小化JavaScript代码指在JS代码中删除不必要的字符，从而降低下载时间，两个流行的工具是#JSMin和YUI Compressor。
混淆是最小化于源码的备选方式，它通过删除注释和空格来减少源码大小，同时它还可以对代码进行混淆处理，作为混淆的一部分，函数名和变量名被替换成短的字符串，这使得代码更紧凑，同时也更难读，使得难于被反向工程，Dojo Compressor (ShrinkSafe)是最常见的混淆工具。
最小化是安全的、直白的过程，而混淆则更复杂，而且容易产生问题，从对国外10大网站的调查来看，通过最小化，文件可减少21%，而混淆则可减少25%（具体可查看马海祥博客《推荐一种测试javascript执行性能和性能比较的方法》的相关介绍）。
除了最小化外部脚本文件外，内嵌的脚本代码也应该被最小化，即使脚本根据法则4被压缩后传输，最小化脚本刻减少文件大小5%或更高。
压缩js和css的作用很显然，减少页面字节数。容量小页面加载速度自然也就快。而且压缩除了减少体积以外还可以起到一定的保护左右。这点我们做得不错。常用的压缩工具有JsMin、YUI compressor等。另外像 http://dean.edwards.name/packer/ 还给我们提供了一个非常方便的在线压缩工具。压缩带来的一个弊端就是代码的可读性没了，但是在调试的时候，工具可以将其复原，也就是调用本地的。
十一、Avoid Redirects（避免重定向）
重定向功能是通过301和302这两个HTTP状态码完成的，如：
HTTP/1.1 301 Moved Permanently
Location: http://mahaixiang.cn/newuri
Content-Type: text/html
浏览器自动重定向请求到Location指定的URL上，重定向的主要问题是降低了用户体验。
一种最耗费资源、经常发生而很容易被忽视的重定向是URL的最后缺少/，如访问http://www.mahaixiang.cn/astrology将被重定向到http://www.mahaixiang.cn/astrology/，在Apache下，可以通过Alias，mod_rewrite或DirectorySlash等方式来解决该问题。
十二、Remove Duplicate Scripts （移除重复的脚本）
十三、Configure ETags（配置实体标签（ETags））
使用ETags减少Web应用带宽和负载
关于此的更多内容请参考《【Web优化】Yslow优化法则（三）添加缓存控制首部》
十四、Make Ajax Cacheable（使 AJAX 缓存）
做ajax请求的时候往往还要增加一个时间戳去避免他缓存。It's important to remember that "asynchronous" does not imply "instantaneous".（记住“异步”不是“瞬间”这一点很重要）。记住，即使AJAX是动态产生的而且只对一个用户起作用，他们依然可以被缓存。
转载请注明：有爱前端 » 【Web优化】Yslow优化法则（汇总篇）
