加快web的一些最佳实践

一 内容：
1 最小化http请求
  最终用户的80%时间都花在前端，比如下载图片，scripts，flash等。所需减少展示一个页面所需要的http请求是快速展示页面的关键。
  一种方式是简化页面设计。在此基础上：
1）压缩文件：将所有的script文件压缩为一个单独文件，将所有的css文件压缩为一个单独文件。
2）CSS Sprites: 即css位移技术，把所有的背景图片合成一个单独的图片，用 CSS的 background-image 和 background-position 属性来展示需要的图片片段。
3）避免内联图片，如：<img src="data:image/gif;base64,**************"/>，这种方式会增大html页面的大小。应该把内联图片让如css，减少页面的大小。
2  减少DNS查询
  DNS服务一般会花费20-120秒时间查询主机名对应的ip。
  我们可以通过浏览器的DNS缓存减少DNS查询的次数。IE缓存DNS的默认时间是30分钟，可以通过注册表的DnsCacheTimeout修改；firefox缓存DNS的默认时间是1分钟，可以通过network.dnsCacheExpiration配置修改。因为一个网页打开的时候，要下载网页中所有的资源，如图片，css，js，flash等。所以，减少这些资源的主机名，就可以减少DNS缓存查询次数。但是减少主机名，也就减少了同时下载的资源个数。最好是2-4个主机名。这个值，是在减少DNS缓存和允许高并发资源下载之间较好的一个折中。
3  避免重定向：
  重定向要通过301,302返回码完成，示例：
HTTP/1.1 301 Moved Permanently
      Location: http://example.com/newuri
      Content-Type: text/html
  浏览器自动将url指向Location字段。所有redirect需要的信息放在header里。除非有Expires或者Cache-Control等头信息表明会被缓存，否则301或302 response不会被缓存。使用meta的refresh标签和javascript是让用户重定向到不同URL的其它方式，但是如果必须要做一个重定向，最好是用标准的3xx HTTP状态码，主要是保证返回按钮能正常工作。
重定向会降低用户体验。重定向延迟了页面的所有资源。因为在html文档到达之前，没有任何东西会被展示，没有任何资源能开始被下载。
一个频繁发生的最浪费的但又经常被开发者忽略的重定向，是少一个反斜杠。比如，我们访问http://astrology.yahoo.com/astrology，会做一个到http://astrology.yahoo.com/astrology/的重定向。所以重定向的结尾要加上反斜杠。
对于两个站点之间的链接，如新旧站点，如果代码是在一台机器上，那么可以使用Alias和mod_rewrite代替重定向；如果是域名更换引起的，可以使用CNAME的方式。
4 后加载的组件：
  一些Javascript代码或者库，比如拖拽或者动画功能，还有一些隐藏内容，和被遮住的图片等，它们可以放到页面初始化完成后再加载。总之，不影响页面展示的资源，都放到页面初始化完之后加载。
5 预加载组件：
  预加载组件看似好像和后加载组件的对立，但事实是为了不同的目的。
  在一个页面加载完之后，加载一些下一个页面会使用的图片，css，js等，这样，当用户访问下一个页面时，会有很多资源已经在缓存里了。
6 减少DOM元素：
  DOM元素的增多，影响页面的加载和节点的查找，在firebug的console端输入：document.getElementsByTagName('*').length 可以获取本页面DOM元素的个数。
7 将资源分为多个域访问：
   将资源分为多个域访问，可以最大程度的并行下载资源。为了防止DNS查找带来的延时，确保不多于4个域。如动态内容可以放到www.example.org，静态资源可以分别放到static1.example.org和static2.example.org。
8 不要出现404资源：
   一是页面中的资源下载会被阻塞，二是浏览器可能会认为是javascript返回值，并尝试着去解析404的返回体，

二 服务端：
1 使用内容传输网络：
  内容传输网络（Content Delivery Network）简称CDN。世界上有很多cdn服务商，如
     Akamai Technologies, EdgeCast, level3 。他们在世界各地有很多服务器，可以将自己的静态内容上传到他们的服务器。这种方式对一般公司花费较贵，所以一般不适用。
2 添加Expires或者Cache-Control头信息
  两个原则：
  对于静态内容，如图片，css等，设置而一个永不过期的Expires头信息。
  对于动态内容，设置一个合适的Cache-Control头信息。
  Expires头信息通常会被用于图片，但是它应该在包括图片，javascripts,css，flash等所有资源中使用。Web服务器使用HTTP response中的Expires头信息告诉客户端资源可以被cache多久，如：
     Expires: Thu, 15 Apr 2010 20:00:00 GMT
表示资源在April 15,2010前不会过时。
如果使用的是Apache，可以使用ExpiresDefault指令去指定一个从当前日期开始的相对日期。示例：10年后：
  ExpiresDefault “access plus 10 years”

请记住，如果把Expires头信息设置为将来很长的时间，那么在这段时间内，浏览器都会从缓存中取资源。那么当修改一个资源的时候，需要修改这个资源的名字，目的是让浏览器当做一个新的资源来取。可以在文件名后面跟上版本信息，如yahoo_2.0.6.js 。

3 GZIP
    使用压缩可以减少HTTP response大小，从而减少response时间。
从HTTP/1.1 开始，网络客户端通过Http request中的Accept-Encoding头信息表示支持压缩：
Accept-Encoding: gzip,deflate
如果web服务器在请求中看到这个头信息，它会按照客户端列出的方法压缩response。Web服务器会通过response中的Content-Encoding头信息通知客户端。
如果使用的是Apache，那么：Apache1.3中使用mod_gzip，Apache2.x使用mod_deflate。
除了html文档，还应该压缩scripts和css，还应该压缩任何文本的response，如XML,JSON等。图片和PDF不应该去压缩，因为它们已经压缩过了，压缩它们不仅浪费CPU，而且可能增加文件大小。
4 在AJAX中使用GET：
Yahoo的研究人员发现，使用XMLHttpRequest时，POST请求分两步实现：先发送头信息，然后发送数据。所以最好使用GET，它只发送一个TCP数据包。使用GET时，最大的URL长度在IE中只有2K。所以GET不支持发送超过2k的数据。
5 避免空的Image src：
下面的情况会导致浏览器向服务器另发一个请求：
<img src=””/>
或：
var img = new Image();
img.src = “”;
对于IE：像页面所在路径发送请求。
对于Safari和Chrome : 请求实际页面本身。
对于FireFox ：firefox3和早期版本，同Safari和Chrome，但是3.5以后不再发送请求。
对于Opera : 遇到空的Image src标签时不做任何处理。

三 CSS：
1 CSS文件页面顶部：
  Yahoo研究优化时，发现将css文件放在HEAD里，会使页面看起来加载更快。这是因为将css放在HEAD中可以让页面逐步呈现。
  我们希望浏览器能尽快的展示所有内容，特别是对于在慢的网络环境中访问有很多内容的页面时，尤其重要。
   将css放在HEAD里，进度条会比放在其他地方更快，并且会尽量快的展示出页面，让用户能感觉到页面正在逐步打开，而不是卡死或者无法访问。
   如果css放在底部的话，在很多浏览器中，包括IE，会阻碍页面的逐步展示。因为如果先加载了页面，而后又遇到css，页面需要被重绘才行。浏览器为了避免这种情况，没有读到css时不会展示页面，页面就会被阻塞，用户会在空白页卡住。
2 避免css表达式：
  css表达式从ie5开始支持，到ie8不再推荐。
  如：
   background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
  如这里所示，这个表达式接受了一个javascript表达式。
  表达式只支持IE浏览器。
表达式的问题在于它计算的的频繁程度比人们希望的多很多。不仅是在页面展示和大小变化的时候，也会在页面滑动时，甚至会在鼠标移过页面时计算。
如果需要，可以用js来设置页面效果，要避免使用css表达式。
3 使用LINK，不使用@import
  前面我们说到css需要放到页面的顶端，而在ie中使用@import，效果是和使用link放在页面底端是一样的。

四 javascript：
1  javascript放到页面底端：
前面我们提到过，页面下载资源时，会从每个页面同时下载2个（IE）或8个（firefox）资源。如果这些资源属于不同的域，那么同时下载的资源会更多，页面展示也就会更快。但是当一个javascript资源下载时，浏览器不会在开始下载其他的任何资源，即使是多个域。
2 从外部引入javascript或者css：
  从外部引入javascript或者css要比写在页面里快。因为外部文件会缓存，但是写在html文件里的会每次都下载。而且因为外部文件可以被缓存，所以把html文件内的javascript或者css放到外部，也不会增加http请求的次数。
3 缩小javascript和css文件的大小：
   缩小代码中不必要字符可以缩小文件的大小，也就改善了下载时间。如移除注释，空白字符(空格，新行，制表符)。常用的最小化工具是JSMin和YUI Compressor。YUI Compressor还可以最小化CSS。
哪怕使用了gzip，这些文件的大小还是会被压缩5%或更多。
4 移出重复的javascript


注：总结于 http://developer.yahoo.com/performance/rules.html