雅虎前端优化原则（Yahoo）

用户离web serve的远近对响应时间也有很大的影响，从用户角度上看，把内容部署到多个地理位置分散的服务器上，将有效提高页面装载速度

CDN是地理上分布的web serve的集合，用户更高效的发布内容，通常基于网络忘记来选择给具体用户服务的web serve

在Yahoo ，把静态内容分布到CDN减少了用户影响时间20%或更多，切换到CDN的代码修改工作是容易的，但能达到提高网站的速度

3.增加Expires Header

首次访问网页时，不得不面临着多次的http请求，但通过使用Expires header，可以在客户端缓存这些元素，者在后续访问中避免了不必要的http请求，Expire header最常用于图像文件，但它也可用于脚本文件、样式表等

浏览器（和代理）使用缓存来减少http请求的次数和大小，使得网页加速装载，web server通过Expires header告诉客户端一个元素可以缓存的时间长度

4. 压缩页面元素

通过压缩HTTP响应内容可减少页面响应时间，从HTTP/1.1开始，web客户端在HTTP请求中通过Accept-Encoding头来表明支持的压缩类型，如：Accept-Encoding: gzip,deflate。   如果Web server检查到Accept-Encoding头，它会使用客户端支持的方法来压缩HTTP响应，会设置Content-Encoding头，如：Content-Encoding: gzip。   Gzip是目前最流行及有效的压缩方法，其他的方式如deflate，但它效果较差，也不够流行。通过Gzip，内容一般可减少70%；如果是Apache，在1.3版本下需使用mod_gzip模块，而在2.x版本下，则需使用mod_deflate。 Web server根据文件类型来决定是否压缩，大部分网站对HTML文件进行压缩，但对脚本文件和样式表进行压缩也是值得的，实际上，对包括XML和JSON在内的任务文本信息进行压缩都是值得的，图像文件和PDF文件不应该被压缩，因为它们本来就是压缩格式保存的，对它们进行压缩，不但浪费CPU，而且还可能增加文件的大小。

5. 把样式表放在头上

有利于用户体验，提高界面的加载速度

HTML规范明确要求样式表被定义在head中，因此，为避免空白屏幕或闪烁问题，最好的办法是遵循HTML规范，把样式表放在head中

6. 把脚本文件放在底部

一是能顺序显示，二是可达到最大的并行下载。 浏览器会阻塞显示知道样式表下载完毕，因此需要把样式表放在head中，而对于脚本来说，脚本后面内容的顺序显示将被阻塞，因此把脚本尽量放在底部意味着更多内容能被快速显示。 脚本引起的第二个问题是它阻塞并行下载数量，HTTP/1.1规范建议浏览器每个主机的并行下载数不超过2个，因此如果把图像文件分布到多台机器的话，可以达到超过2个的并行下载，但是当脚本文件下载时，浏览器不会启动其他的并行下载，甚至其他主机的下载也不启动。 一个备选方法是使用延迟脚本（deferred script），DEFER属性表明脚本未包含document.write，指示浏览器刻继续显示，不幸的是，Firefox不支持DEFER属性，在IE中，脚本可能被延迟执行，但不一定得到需要的长时间延迟。 从另外角度来说，如果脚本能被延迟执行，那它就可以被放在底部了。

7. 避免css表达式

css表达式的问题是其执行次数超过大部分人的期望，不仅页面显示和resize时计算表达式，而且当页面滚屏，甚至当鼠标在页面上移动时，都会重新计算表达式。 一种减少css表达式执行次数的方法是一次性表达式，即当第一次执行时就以明确的数值代替表达式，如果必须动态设置的话，可使用时间处理函数代替，如果必须使用css表达式的话，请记住他们可能被执行上千次，从而影响页面性能

8. 把JavaScript和css放到外部文件中

另外一方面，使用外部文件，会被浏览器缓存，则页面大小会减小，同时又不增加HTTP请求次数。   因此，一般来说，外部文件是更可行的方式，唯一的例外是内嵌方式对主页更有效，如Yahoo!和My Yahoo!都使用内嵌方式，一般来说，在一个session中，主页访问此时较少，因此内嵌方式可以取得更快的用户响应时间

9. 减少DNS查询次数

DNS用于映射主机名和IP地址，一般一次解析需要20～120毫秒，为达到更高的性能，DNS解析通常被多级别地缓存，如由ISP或局域网维护的caching server，本地机器操作系统的缓存（如windows上的DNS Client Service），浏览器，IE的缺省DNS缓存时间为30分钟，Firefox的缺省缓冲时间是1分钟。   减少主机名可减少DNS查询的次数，但可能造成并行下载数的减少，避免DNS查询可减少响应时间，而减少并行下载数可能增加响应时间，一个可行的折中是把内容分布到至少2个，最多4个不同的主机名上。

10. 最小化JavaScript代码

最小化JavaScript代码指在JS代码中删除不必要的字符，从而降低下载时间，两个流行的 工具 是#JSMin和YUI Compressor。   混淆是最小化于源码的备选方式，象最小化一样，它通过删除注释和空格来减少源码大小，同时它还可以对代码进行混淆处理，作为混淆的一部分，函数名和变量名被替换成短的字符串，这使得代码更紧凑，同时也更难读，使得难于被反向工程，Dojo Compressor (ShrinkSafe)是最常见的混淆工具。

11. 避免重定向

浏览器自动重定向请求到Location指定的URL上，重定向的主要问题是降低了用户体验。   一种最耗费资源、经常发生而很容易被忽视的重定向是URL的最后缺少/，如访问http://www.csxiaoyao.com/blog将被重定向到http://www.csxiaoyao.com/blog/，在Apache下，可以通过Alias，mod_rewrite或DirectorySlash等方式来解决该问题。

12. 删除重复的脚本文件

在一个页面中包含重复的JS脚本文件会影响性能，即它会建立不必要的HTTP请求和额外的JS执行。   不必要的HTTP请求发生在IE下，而Firefox不会产生多余的HTTP请求，额外的JS执行，不管在IE下，还是在Firefox下，都会发生。   一个避免重复的脚本文件的方式是使用模板系统来建立脚本管理模块，除了防止重复的脚本文件外，该模块还可以实现依赖性检查和增加版本号到脚本文件名中，从而实现超长的过期时间。

13. 配置ETags

Etag（Entity tags）实体标签，这个tag和你在网上经常看到的标签云那种tag有点区别，这个Etag不是给用户用的，而是给浏览器缓存用的。   Etag是服务器告诉浏览器缓存，缓存中的内容是否已经发生变化的一种机制，通过Etag，浏览器就可以知道现在的缓存中的内容是不是最新的，需不需要重新从服务器上重新下载，这和“Last-Modified”的概念有点类似，很遗憾作为网页开发人员对此无能为力，他依然是网站服务器人员的工作范畴。   ETags是用于确定浏览器缓存中元素是否与Web server中的元素相匹配的机制，它是比last-modified date更灵活的元素验证机制。