本文是阅读《高性能网站建设指南》一书的笔记。该书作者是Yahoo!的Steve Souders ，总结了yahoo!在web前端优化的最佳实践。

Web前端性能黄金法则：只有10%-20%的最终用户响应时间花在下载html文档上。其余时间花在了下载页面中所有的组件上。
页面组件包括：图片，javascript，css,flash等内容

Http请求响应
GET /home/**.js
HTTP 1.1
Host: www.taobao.com
User-Agent: Mozilla/**
Accept-Encoding:gzip,deflate  ----》支持压缩
If-Modified-since:web,22 Feb**   -----》判断是否采用浏览器缓存
Expires:web****  -----》明确声明失效时间，避免If-Modified-since条件请求的至少一次与服务器的交互
Connection: keep-alive ----》使用长连接
--------------------------------------------------------------------------------------------------------------------
HTTP 1.1 304 Not Modified ----》没修改
Content-Type: application/x-javascript
Last-Modified : web,22**
Content-Encoding:gzip

更详细的见http规范： http://www.w3.org/Protocols/rfc2616/rfc2616.html

1、减少HTTP请求

• 使用图片地图 一个图片上面关联多个URL,由点击的位置决定目标URL，目的在于建设图片数量
• CSS Sprites 讲多个图片合并成一幅图片，图片地图中的图片要连续，Css Sprites不需要
  
• 内联图片
• 合并脚本和样式表 网站首页平均应该使用6、7个脚本和1、2个样式表
  

2、使用外部JavaScript和CSS

   单纯来说，内联比外联更快一些。

   对于用户访问很少的页面，比如注册等，建议内联。

   对于用户访问较多的页面，比如list或者商品详情页面等，建议外联，浏览器可以使用缓存的组件。

   对于重用性较高的组件，使用外联

3、使用内容发布网络
   CDN（Content Delivery Network）内容分发网络，让用户就近访问页面静态组件
4、减少DNS查找
    通常浏览器查询一个给定的主机名的ip需要花费20-120毫秒。建议将页面组件放在至少2个，但不超过4个的主机名下。
5、添加Expires或者Cache-Control头　
   Expires和Cache-Control头都用于浏览器可以使用本地缓存直至制定的时间，web服务器如apache,lighttpd,nginx等都有相应模块可配置
6、精简JavaScript
  精简代码，将所有不必要的注释和空白换行等移除。可以使用 JSMin（http://crockford.com/javascript/jsmin）进行精简。
7、压缩组件　
   Accept-Encoding头，一般只压缩脚本和样式表，图片不需要，因为图片通常都是压缩过的。Apache 2.x使用mod_deflate模块gzip压缩
8、避免重定向
   重定向使得html文档到达前，页面不会呈现任何内容。所以要减少重定向
9、将样式表放在顶部
   样式表放在底部，浏览器为了在样式表变化时不需要重绘页面会阻止内容自顶向下逐步呈现。将CSS放在顶部，有利于浏览器从上向下显示页面。
   推荐使用<link rel="stylesheet" href="common.css">方式，而不是import方式，因为import方式会导致组件下载的无序性，破坏了放在顶部的初衷。
10、移除重复脚本
   由于团队成员的长期维护，会遗留一定的重复脚本，需要定期清理
11、将脚本放在底部 　
  浏览器遵从http规范并行的从每个主机名并行下载两个组件。这样可以有效提高下载的效率。但浏览器在下载脚本时时禁用并行下载的，因为脚本有可能修改页面内容。浏览器会阻塞确保页面恰当的布局。
12、配置ETag
13、避免CSS表达式 　
   CSS表达式是实现的效果可以通过其他手段实现，并且风险更小。
14、使Ajax可缓存
   Ajax只是实现了异步，避免页面的重新加载，但是不意味着即时。所有一个用户在操作后仍然要等待才能看到结果。一些缓存的原则也可以适用于ajax.
   Ajax的POST要两步，而GET只需要一步。所以尽量采用get方式。GET 方式可以更快响应，但是可能会有被浏览器缓存的问题，一般都需要加个随机数来避免，POST 方式则不会。

15、Cookie
  减少cookie中的信息，避免不重要的信息放在cookie中；对于图片或者静态服务器，使用cookie无关的域名，避免cookie的传输。