雅虎前端优化14准则

大家好，又见面了，我是你们的朋友全栈君。

1.尽可能使用少的HTTP请求 Make fewer HTTP requests; 

    这个是很重要的一条，具体措施是使用Image maps  和Inline Images；合并CSS和脚本代码。比如对于Image Maps 
(服务器端)server-side 
<a href=”navbar.cgi”> <img ismap src=”imagemap.gif”> </a>→ http://…/navbar.cgi?127,13 
(客户端)client-side – preferred 
<img usemap=”#map1″ border=0 src=”http://images.cnblogs.com/imagemap.gif”> 
<map name=”map1″>  <area shape=”rect” coords=”0,0,31,31″ href=”home.html” title=”Home”> 
  … 
</map> 
(缺点是)drawbacks: 
图片需要是连续的。 

2.使用内容分发网络 Use a CDN； 
  在发布你的动态内容之前发布网站的静态内容，比如使用广泛的Akamai 
3.增加一个期限头部 Add an Expires header 
  不仅仅是对图片设置，对于脚本和样式表同样需要设置，在Apache中具体的配置方法如下： 
    ExpiresActive On 
    ExpiresByType application/x-javascript “modification plus 2 years” 
    ExpiresByType text/css “modification plus 5 years” 
当你修改一个资源的时候，修改资源的名称(自动进行)，给文件名称加一个时间戳，例如img_1385413733.png； 
同时候将资源纳入版本控制系统中，比如使用CVS个SVN，例如img_1.2.png。 

4.压缩组件Gzip components 
  当前90% 的浏览器都支持压缩，压缩不仅仅是指HTML，脚本，CSS和XML都可以压缩。 
在Apache中修改下面的配置来支持压缩 
Apache 2.x: mod_deflate 
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript 
对于HTTP请求和响应，表现如下 
HTTP request： Accept-Encoding: gzip, deflate 
HTTP response: Content-Encoding: gzip Vary: Accept-Encoding 

5.将CSS置为页面的顶部 Put CSS at the top 
  主要原因是CSS样式表会阻塞HTML在IE中的显示(如果没有下载完的话)

6.将JS移植页面的底部 Move JS to the bottom 
  主要原因是脚本的执行会阻塞并行下载和阻塞其他元素在IE中的展示

7.避免使用CSS表达式 Avoid CSS expressions 

比如下面的例子： 

  width: expression( 

        document.body.clientWidth < 600 ? 

      “600px” : “auto” ); 

原因是由于鼠标的移动，按下键等操作事件会是的上述表达式执行多次  

8. 是JS和CSS从外部包含  Make JS and CSS external 

  可以减少HTML文档的大小，同时增加脚本的重用，但是会增加请求数 

但是HomePage是一个例外，在Homepage中使用Inline和 PostOnload效果不错，yahoo和goolgede 

首页都这样处理了； 

9.减少DNS的查找 Reduce DNS lookups 

  一个典型的DNS查询是20－120ms,DNS 查询的时间直接影响到并行下载的效率，尽量减少主机的域名数目。 

常用浏览器的缓存时间设置如下： 

IE 

DnsCacheTimeout: 30 minutes 

KeepAliveTimeout: 1 minute 

ServerInfoTimeout: 2 minutes 

Firefox 

network.dnsCacheExpiration: 1 minute 

network.dnsCacheEntries: 20 

network.http.keep-alive.timeout: 5 minutes 

Fasterfox: 1 hour, 512 entries, 30 seconds 

10.精简JS Minify JS 

  这个主要涉及到JS的编码和优化 

11.避免重定向 Avoid redirects 

  通常Web服务器返回的是3XX的状态码，常常是301和302，可以通过添加过期头来缓存重定向； 

12. 移除重复的脚本 Remove duplicate scripts 

    统计数剧表明20%的网站存在重复的脚本文件，这将直接影响HTTP请求的性能  

13.关闭ETags功能 Turn off ETags 

    Web服务器返回的实体的唯一标识，主要应用在有条件的Get请求中。 

    ETag: “c8897e-aee-4165acf0” 

    Last-Modified: Thu, 07 Oct 2004 20:54:08 GMT 

    If-None-Match: “c8897e-aee-4165acf0” 

  If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMT 

如果ETags不匹配，就不能发送304码，对于服务器之间一个单独的实体的ETag总是不同的。在Server和Client的格式分别 

如下: 

  Apache: inode-size-timestamp 

  IIS: Filetimestamp:ChangeNumber 

对于服务器多余一台机器的Site，很少返回304状态码。 

14.是AJAX代码可缓存同时经可能小 Make AJAX cacheable and small 

  XHR, JSON, iframe, 动态脚本 都是可以被缓存, 精简和压缩的：a personalized response should still be cacheable by that person。比如在Yahoo! Mail Beta中，由于XML标示的地址本是不会经常变动的，可以缓存它，将最后修改时间标记在URL中。 

Web性能分析工具 

1。IBM Page Detailer  详细信息参考：http://alphaworks.ibm.com/tech/pagedetailer 

2。Fasterfox 是Firefox的一个插件，可以详细统计一个网页的载入时间，http://fasterfox.mozdev.org/ 

3。LiveHTTPHeaders 是Firefox的一个插件，可以查看HTTP请求头  http://livehttpheaders.mozdev.org/ 

4。firebug 是Firefox的一个插件, 功能强大，可以多JS和CSS做分析 http://getfirebug.com/