Yahoo!军规详解

博客地址：http://www.kapeter.com/archives/326

详细讲解请见：《高性能网站建设指南》

规则一：减少HTTP请求
1、图片地图（Image Map）：将图片合并，通过定位响应操作，适用于导航栏或使用多个图片做超链接。
2、CSS Sprites（雪碧图）：将多个小图片合并，利用background-position指定显示偏移量，雪碧图制作工具：Go!Png（由腾讯alloyteam团队开发）
3、内联图片（Inline Images）：没有使用过……
4、合并CSS样式表和Javascript脚本：尽量将css代码放到一个文件中，javascript同理。

规则二：使用内容发布网络（CDN）
简而言之，就是在多个地理位置部署服务器，用户访问网站时会自动连接到离自己最近的服务器，从而提高响应速度，相当于设置了多个网站副本。
个人网站忽略此条，完全是用钱堆出来的……

规则三：添加Expires头

Expires:Fri, 14 Aug 2015 02:24:29 GMT
Cache-Control:max-age=315360000

第一段代码表示在2015年8月14日02:24:29前可以使用当前缓存，第二段代码表示自请求开始后的十年中都能使用该副本，第二段代码较一段的好处在于不需要更新失效日期。这些长期有效的缓存适用于那些不需要经常更改的组件，比如CSS样式表等。如果我们更改了这些缓存，我们可以通过修改文件名的方式（如加入版本号），让浏览器重新发送请求。

规则四：压缩组件（gzip）
这一点，你需要对服务器进行配置，博主使用的是虚拟主机，没有实践过……
详细请参加Apache的mod_gzip模块。

规则五：将样式表放在顶部
众所周知，浏览器是逐步解析的，将样式表放在最后，虽然可以使页面元素更快地加载，但存在“白屏”或“闪屏”的风险，即当页面加载完毕后，样式表会对页面进行重绘，画面会发生改变，从而引起“闪屏”。因此，虽然从性能的角度来说，放在底部会加快页面加载速度，但极大的影响了用户体验，两者权衡之下，用户体验更为重要，因此将样式表放在顶部。

规则六：将javascript脚本放在底部
原理同规则五。
前端开发基本常识之一：脚本会阻塞浏览器的下载与解析，即浏览器会先解析javascript脚本，再进行下一部分的加载。
同时，将javascript脚本放在底部还能避免另一个问题发生，详见我的博文：《JS错误”Cannot set property onclick of null”的解决方法》。

规则七：避免CSS表达式

div{
position: absolute;
width: 100px;
height: 100px;
left: expression(document.body.offsetWidth - 110 + "px");
top: expression(document.body.offsetHeight - 110 + "px");
background: red;
}

观察上面的代码，每当用户进行操作时，表达式就会被执行一次，如果存在多个div，执行次数会达到一个恐怖的数字，导致用户的浏览速度明显变慢。
解决方法很简单，将表达式写在javascript脚本中，明确用户执行什么操作运行这段代码。

规则八：使用外部Javascript和Css
首先，需要明确一点 ，内联样式的加载速度优于外部样式。举个例子，一个页面有4个CSS文件和一个Javascript文件，那么它的HTTP请求为6，而如果将这些通过内联集合到一个页面中去，则HTTP请求为1，可想而知，哪个更加快速。
但这里我们需要考虑两点，外部文件是可以建立缓存的，而内联样式是做不到的。如果用户访问我们网站多个页面，而这些页面之前存在通用样式，用户在第一次访问我们的主页时，就缓存了这些文件，接下来就不需要再去请求这些外部文件。第二，外部文件还有一点好处，那就是代码重用，你可以在不同页面反复调用这些代码，比如网站的头部和底部样式，基本上整个网站使用同一个样式，使用外部文件可以大大地减少我们开发的工作量。

规则九：减少DNS查找
Internet是通过IP地址来查找服务器的，但这些IP地址很难被记忆，因此通常使用URL（即网址）来取代它。当我们在浏览器中输入URL后，DNS通过该URL去查找对应的IP地址返回给浏览器，从而与服务器建立连接。这一部分也是会消耗一定的时间的，因此需要减少DNS查找。基本方法是在计算机中设置DNS缓存，不过博主基本没用过……

规则十：精简Javascript和Css
简而言之，就是压缩Javascript和css文件的大小。具体做法是，删除文件中的空格与注释，将一些变量转变为更加短小的字符串，来减小文件大小。具体案例可以参考jquery，压缩前的jquery.js有几百KB，压缩后的jquery.min.js大小减少到90KB。
这里我推荐两个压缩插件：
js压缩工具：uglify（该插件也是jquery所使用的压缩工具）
css压缩工具：grunt-contrib-cssmin
具体配置方法请见：Grunt搭建前端开发环境

规则十一：避免重定向
一句话：不要使用重定向……

规则十二：移除重复脚本
如果是个人开发，一般不会出现这种情况。但大型的网站项目中，往往有很多团队成员参与同一个页面的开发，成员A不知道成员B重复已经引用了C.js这个文件，从而导致了重复脚本。我们可以通过设置版本号避免这一问题。

规则十三：配置ETag

规则十四：使ajax可缓存

<---------------------------------------------------华丽的分割线--------------------------------------------------->

使用Yslow进行网站性能优化
什么是YSlow？
Yslow是雅虎开发的基于网页性能分析浏览器插件。
YSlow可以对网站的页面进行分析，并告诉你为了提高网站性能，如何基于某些规则而进行优化。
YSlow可以分析任何网站，并为每一个规则产生一个整体报告，如果页面可以进行优化，则YSlow会列出具体的修改意见。
以上的yahoo!军规十四条均被整合在插件中。

如何使用YSlow？
这里我使用的是Firefox浏览器。
在安装YSlow之前，你需要确保自己的浏览器安装了Firebug。
YSlow可在火狐插件商店直接下载，它被集合在Firebug界面中。
不幸的是，最新版的Firefox无法兼容YSlow，
你可以访问这里http://yslow.org/mobile/
把页面最后的那个Desktop Bookmarklet Installation Instructions 里的 Yslow 按钮拖拽到火狐的书签工具栏即可。
以下是我个人博客的YSlow检测结果。

上文提到的十四条军规其实是Yslow的第一个版本，目前规则已经扩充到23条，功能更加强大了。
你还有什么理由不用它呢！