小议YSLOW提升网站性能13黄金法则

小议YSLOW提升网站性能13黄金法则

其实这些黄金法则已经用烂了并且就快被我遗忘了，只是最近要整理前端开发质量的规范，所以就想起了它，正好又想起好久没博了，那就写写吧，希望对还不了解的兄弟们有所帮助！

法则1. Make fewer HTTP requests

这点对于提升前端开发性能的意义是非常大的，早有实践证明，浏览器加载一个页面的DOM结构仅仅只占总加载时间的10%-20%,剩下的时间都在处理页面上组件的下载，组件越多，HTTP的请求数越多，耗时自然就越长。所以我们要做的是尽量少的引用外部静态资源，js、css以及图片。

我们可以通过：图片地图、CSS sprites、合并脚本和样式表等方式来减少HTTP请求以达到提升页面的性能。这里简单提一下图片地图，四年前，他是为我所不耻的，那时候觉得这么做太不专业了，一直到YAHOO推出Yslow告诉我我错了，不相信的朋友，看看下面这个简单的分析：

 

上面的结果一个是用图片地图的方式做的，另外一种是采用6个带链接图片的方式做的，他们被渲染的结果一目了然，图片地图的方式由于减少了HTTP请求数，渲染效率提升了将近50%。而且你会惊奇的发现，合并后的图片比分离的图片大小的总和小，这其实是因为合并后的图片，降低了图片的颜色表，格式信息等内容。

法则2. Use a CDN

根据用户群的分布，为你的网站内容以及静态资源安排离用户最近的网络发布点，这样用户的HTTP请求的响应时间将缩短，从而提升用户访问的速度。

对于一般性网站，这项是烧钱的活，顶多摸摸口袋，遐想一下而已，哈哈！当然作为穷人的我们，也可以自娱自乐一翻，在firefox地址栏输入about:config打开FF的参数设置界面，新建一个名为extensions.firebug.yslow.cdnHostnames的字符串变量，把你的网站地址作为这个变量的值，这样Yslow就会把你的网站当成一个CDN服务器，认为这个网站上的所有文件都是经过CDN加速的

法则3. Add an Expires header

给文件加上关于过期时间的header报文，让用户通过本地缓存来更快的访问网站
这个文件过期时间，其实就是通过header报文来指定特定类型的文件在浏览器中的缓存时间。有些文件(例如样式表中调用的背景图片和文章中调用的图片)其实在很长一段时间内我们都不会对它们有什么改变，这类文件可以设置非常长的缓存时间，这样浏览器以后就不需要再从服务器下载这些文件而直接从缓存中读取，从而大大加速网站的载入速度。

以Apache配置为例，我们要做的，是在网站的.htaccess文件中写入以下内容：

1. <IfModule mod_expires.c>
2. ExpiresActive On 
3. ExpiresDefault A600 
4. ExpiresByType image/x-icon A2592000
5. ExpiresByType application/x-javascript A604800 
6. ExpiresByType text/css A604800
7. ExpiresByType image/gif A2592000 
8. ExpiresByType image/png A2592000
9. ExpiresByType image/jpeg A2592000 
10. ExpiresByType text/plain A86400
11. ExpiresByType application/x-shockwave-flash A2592000 
12. ExpiresByType video/x-flv A2592000
13. ExpiresByType application/pdf A2592000 
14. ExpiresByType text/html A600
15. </IfModule>

text/css表示样式表文件，text/plain代表的纯文本类文件，依次类推。那个A2592000就表示这种类型文件在浏览器中的缓存时间，以秒为单位。一天86400秒，2592000就表示这类文件可以缓存30天。如果你不是经常修改模板，那样式表文件和javasctipt文件基本上也可以设置缓存一周到一个月左右。text/html文件不要设置太长的缓存时间，因为这些东西修改的频率很高，而且大部分blog的访客平均访问时间能到10分钟的并不多。

法则4. Gzip components

压缩HTTP响应包，减少网络传输时间，顾明思意，这是通过减小HTTP请求的大小，来减少用户的响应时间的。下面简单介绍一下它的工作原理：从HTTP1.1开始，客户端向目标服务器发送的请求信息中就有accept-Encoding标识对压缩的支持，如果目标服务器看到请求中有该标识，就会用该标识中列出的压缩技术对HTTP响应做压缩，并且会在返回的响应中用content-encoding标识告诉客户端采用了什么压缩方法。

压缩后基本上可以将返回的HTTP响应大小减少60%-70%，响应时间比未压缩之前至少提升50%以上，所以意义也是非常之大的。

法则5. Put CSS at the top

将CSS放在页面头部，这个主要是为了让浏览器可以逐步的渲染出页面，避免IE出现白屏的现象。这一点对页面以及组制件的加载速度其实是没什么影响的，更多的是从用户体验的角度去完善用户访问页面时的视觉感观。

法则6. Put JS at the bottom

将JS放在页面底部，一般情况下JS的下载是阻塞模式的，放在页面顶部会阻塞其他资源的下载，这样也会造成浏览器的白屏现象。

看上图，很明显，页面在头部加载了一个脚本，耗时1秒多，这一秒多的时间页面是白屏的，当脚本加载完成以后，才能继续加载页面中的其他组件，我们可以清楚的发现脚本下载阻塞了页面的呈现，所以有条件的话可以单独配置一台JS服务器，哈哈

法则7. Avoid CSS expressions

不要使用CSS表达式，因为不当的CSS表达式需要很多资源，有时甚至会造成页面假死，当然如果你自认为你已经是CSS专家，并且可以完全驾驭表达式造成的性能问题的话，我觉得用它没什么问题。不过IE-only，价值不是特别大，所以还是少用为妙啊。

法则8. Make JS and CSS external

将CSS和JS使用外部的独立文件引用，其实这个和减少HTTP请求是矛盾的，而且事实上不考虑其他因素的影响，内联JS和CSS对于页面加载的速度比外联快很多。不过结合前面缓存外联的JS和CSS的话，不单可以实现减少HTTP请求，还可以减少HTML的文件大小，一举两得，让不可能变成了可能！不过最合理的做法应该是先判断外联元素是否被缓存，如果有的话就动态加载外联的元素，没有的话就调用内联的元素。

法则9. Reduce DNS lookups

减少域名解析次数，域名解析也是个耗时的头儿，要注意。这CDN一多，域名查询也多，是冲突的。大家按自己情况合理取舍。

通常情况下按照我们的理解，静态资源文件都是放在本站点目录下的。由于以前大家的网络速度都不快，IE浏览器为了防止大量的http请求阻塞了网络连接，所以同一域名下的http请求，只允许2个并发线程，所以这就导致我们看到有的页面的图片是逐步逐步显示出来的。显而易见，为了突破这个限制，我们可以增加几个域名，从而增加并发下载，加快速度。

法则10. Minify JS

最小化压缩JS，和第4点不同，使用YUI Compressor或者JSMin将JS文件进行分析，将一些变量名变短，去除不必要的空格和符号

法则11. Avoid redirects

避免重定向

法则12. Remove duplicate scripts

去除重复的脚本，不光是文件，甚至是同功能的函数

法则13. Configure ETags

配置实体标签，ETag是用于服务器和浏览器间文档校验的一种手段，如果匹配就使用缓存版本，不匹配的话，重新下载。但是使用CDN的时候，不同镜像间的ETag是不一样的，这就导致了ETag的失灵。我们删除ETag。