web性能优化(最佳)

简单的列举如下

1. 尽量减少HttpRequest

    方法：

    a. 合并CSS为一个文件,合并JS为一个文件.

    b. 对于背景图片,合并在一起,然后在css中用 position等属性来调用图片. 这种方法很大大型网站都在使用.

    c. image map 简单的说也是把多张图片合并成一张图片，然后在图片的某些区域可以设置“热点”（超链接）.       
    d. inline image 使用 Data URLs 来嵌入到面页。
        语法是:  data:[<mediatype>][;base64],<data>
        例子(也可以写在css文件中url(data:[<mediatype>][;base64],<data>)):
              <img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
                  /ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
                  V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" 
                  width="16" height="14" alt="embedded folder icon">
             结果显示的是文件夹的图片:
       支持的浏览器有：Opera 7.2+, Firefox, Safari, Netscape, and Mozilla, Internet Explorer 8, 注意Internet Explorer 5-7 不支持。
       缺点：IE5-7不支持
                需要些额外的工作去做reencode,reembed(图片编码工作)
                不般不用于太大的图片，因为URL本身长度限制。   
                Base64编码的图片比其它二制进图片要大33%左右

2. 使用Content Delivery Network(文本发布网络)

     CDN的实现分为三类：镜像 、高速缓存、专线。

    个人网站以及小型网站没必要使用，费用高。

3. Add an Expires or a Cache-Control Header

    a. 对于静态文件（css/js/image..）,采用从不过期策略.

        例如 对test_1.0.js 请求的过程应该是这样子的：

        可以使用Fiddler或者HttpWatch来观察

        第一次访问页面,观察js请求状态是200

        第二次刷新页面(F5),观察js请求状态是304

        第三次用鼠标访问首页,观察js请求状态是(Cache)

    b. 对于动态的情况,设置合适的过期时间,如ASP.NET 中就有设计OutPutCache的标签
4. Gzip压缩

    先看一个请求

    HttpRequest Header:

      Accept-Encoding: gzip, deflate

      明白客户端浏览器允许gzip,deflate压缩格式.

    HttpResponse Header:

      Content-Encoding: gzip

    大多数的网站只压缩Html文档,其实完成也可以压缩js/css/xml/json等文本文件。

    image/pdf本身已经压缩过了,没必要再用压缩.

5. 把css文件放在页面顶部

    主要考虑用用户体验这块

6. 把js文件放面页面底部

   主要原因是js请求会block并行请求.即每个hostname有一个js request时,它就不能再有其它请求了.

   The DEFER attribute indicates that the script does not contain document.write

7. 避免使用css expression

    理由是 只有IE支持且旧版本的IE对css expression的性能不好.

8. 独立出js/css 文件

    理由 方便维护,重用,还有缓存效果.

9. 减少DNS lookup时间

    IE自动缓存DNS时间是30分钟

    不同的域名就需要不同的DNS查找时间.

    一个网站一般建议设有2-4台服务器(hostname),一台用于放静态文件(css,js,image等)

10. 压缩js/css文件  

11. 避免重定向请求.

      301永久重定向,搜索引擎索引中保存新的URL

      302请求的网页临时移动到新位置,搜索引擎索引中保存原来的URL

12. 去掉多余的js

13. 配置ETag

     集群的问题上ETag无法解决。生成ETag也浪费CPU时间

     一般不用ETag

14. 并行下载Javascript

      这个我会另外写个文章出来