【Web优化】Yslow优化法则（汇总篇）

1、Make Fewer HTTP Requests （尽量减小http请求数）

http请求是要开销的，减小请求数能够提升网页加载速度。经常使用的方法，合并css，js以及 Image maps和css sprites等。（css sprites是指只用将页面上的背景图合并成一张，而后经过background-position来取背景。）

更多请参考《【Web优化】Yslow优化法则（一）最小化HTTP请求数》

2、Use a Content Delivery Network （使用CDN 内容分发网络)

经过在现有的Internet中增长一层新的网络架构，将网站的内容发布到最接近用户的 cache服务器内，经过DNS负载均衡(可选根据时间或访问速度来决定访问哪台服务器资源)的技术，判断用户来源就近访问cache服务器取得所需的内容。这样能够有效减小数据在网络上传输的时间，提升速度。

更多请参考《【Web优化】Yslow优化法则（二）使用CDN》

3、Add an Expires Header（添加Expires/cach-control头）

如今愈来愈多的图片，脚本，css，flash被嵌入到页面中，当咱们访问他们的时候势必会作许屡次的http请求。其实咱们能够经过设置 Expires header来缓存这些文件。Expire其实就是经过header报文来指定特定类型的文件在览器中的缓存时间。大多数的图片，flash在发布后都是不须要常常修改的，作了缓存之后这样浏览器之后就不须要再从服务器下载这些文件而是而直接从缓存中读取，这样再次访问页面的速度会大大加快。

不过时间也有过问题，特别是对于脚本过时时间的设置仍是应该仔细考虑下，否则相应的脚本功能更新后客户端可能要过很长一段时间才能“感知”到这样的变化。因此，哪些应该缓存，哪些不应缓存仍是应该仔细斟酌一番。

关于此的更多内容请参考《【Web优化】Yslow优化法则（三）添加缓存控制首部》

 4、Gzip Components（启用gzip压缩）
Gzip的思想就是把文件（  html ,php, js, css, xml, txt…）先在服务器端进行压缩，而后再传输。这样能够显著减小文件传输的大小。传输完毕后浏览器会从新对压缩过的内容进行解压缩，并执行。

 5、Put Stylesheets at the Top(将css放在页面最上面)

  不管是HTML仍是XHTML仍是CSS都是解释型的语言，而非编译型的，因此CSS到上方的话，那么浏览器解析结构的时候，就已经能够对页面进行渲染，这样就不会出现，页面结构光秃秃的先出来，而后CSS渲染，页面又忽然华丽起来，这样太具备“戏剧性”的页面浏览体验了。
咱们发现把样式表移到HEAD部分能够提升界面加载速度，所以这使得页面元素能够顺序显示。
在不少浏览器下，如IE，把样式表放在document的底部的问题在于它禁止了网页内容的顺序显示，浏览器阻止显示以避免重画页面元素，那用户只能看到空白页了，Firefox不会阻止显示，但这意味着当样式表下载后，有些页面元素可能须要重画，这致使闪烁问题。
HTML规范明确要求样式表被定义在HEAD中，所以，为避免空白屏幕或闪烁问题，最好的办法是遵循HTML规范，把样式表放在HEAD中。
对此，马海祥的建议是：目前尚未碰到把样式表放在文档后面的状况吧？

 6、Put Scripts at the Bottom（将script放在页面最下面）
将脚本放在页面最下面的目的有那么两点： 一、由于防止script脚本的执行阻塞页面的下载。在页面loading的过程当中，当浏览器读到js执行语句的时候必定会把它所有解释完毕后在会接下来读下面的内容。 因此放在页面最后，能够有效减小页面可视元素的加载时间。        二、 脚本引发的第二个问题是它阻塞并行下载数量。
 7、Avoid CSS Expressions（避免在css中使用表达式）
CSS表达式是功能强大的(同时也是危险的)用于动态设置CSS属性的方式，IE从版本5开始支持CSS表达式，如backgourd-color: expression((new Date()).getHours()%2?”#B8D4FF”:”#F08A00”)，即背景色每一个小时切换一次。
CSS表达式的问题是其执行次数超过大部分人的指望，不只页面显示和resize时计算表达式，并且当页面滚屏，甚至当鼠标在页面上移动时都会从新计算表达式。其实大部分能够用js实现。
 8、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的表达式，他很容易让浏览器出现假死。
 9、Reduce DNS Lookups（减小DNS查询）
在Internet上域名与IP地址之间是一一对应的，域名（kuqin.com）很好记，但计算机不认识，计算机之间的“相认”还要转成ip地址。在网络上每台计算机都对应有一个独立的ip地址。在域名和ip地址之间的转换工做称为域名解析，也称DNS查询。一次DNS的解析过程会消耗20-120毫秒的时间,在dns查询结束以前，浏览器不会下载该域名下的任何东西。因此减小dns查询的时间能够加快页面的加载速度。yahoo的建议一个页面所包含的域名数尽可能控制在2-4个。
 10、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/ 还给咱们提供了一个很是方便的在线压缩工具。压缩带来的一个弊端就是代码的可读性没了，可是在调试的时候，工具能够将其复原，也就是调用本地的。

 11、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等方式来解决该问题。
 12、Remove Duplicate Scripts （移除重复的脚本）
 十3、Configure ETags（配置实体标签（ETags））

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

关于此的更多内容请参考《【Web优化】Yslow优化法则（三）添加缓存控制首部》

十4、Make Ajax Cacheable（使 AJAX 缓存）作ajax请求的时候每每还要增长一个时间戳去避免他缓存。It's important to remember that "asynchronous" does not imply "instantaneous".（记住“异步”不是“瞬间”这一点很重要）。记住，即便AJAX是动态产生的并且只对一个用户起做用，他们依然能够被缓存。