雅虎前端优化原则（Yahoo）

1. 减小HTTP请求次数

为了缩短用户响应的时间

• css sprites方法能够组合页面中的图片到单个文件中可以，并使用css的background-image和background-position属性来实现所需的部分图片
• Inline images使用data：URLschema在页面中内嵌图片，者将增大HTML文件的大小，组合inline images到用户的（缓存）样式表，既能减小HTML请求，又能避免加大HTML文件大小。
• Combine files 经过组合多个脚本文件到单一文件来减小http请求，样式表也可采用相似的方法处理，这个方法虽然简单，但当页面之间脚本和样式报表变化很大时，该方式将遇到很大的挑战。若是作到的话，将能加快响应的时间

2.使用CDN（Content Delivery Network， 内容分发网络）

用户离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更灵活的元素验证机制。

14. 缓存Ajax

提升Ajax的性能最重要的方式是是的其response可缓存