Web性能优化

Web通信过程

首先我们看下从用户输入网址到收到响应这个过程中，有哪些步骤：

1. 缓存：
   浏览器首先会查看该内容是否有被缓存，没有则进行DNS解析
2. DNS解析
   浏览器会查找浏览器上的DNS缓存信息，没找到则查找本机系统目录的dns文件信息，找不到则往ISP发送DNS解析请求，请求成功获得ip地址
3. 建立TCP连接
   三次握手建立通信连接
4. 发送HTTP请求
5. 接收响应
6. 浏览器解析接收到的响应
   检查Doctype,逐行解析，下载相应的CSS，JS
   其中IE会不等CSS下载完就对HTML进行解析显示，而Chrome则要等CSS下载结束才会开始页面渲染。
   若有多个css或js文件属于同一域名，IE可同时下载4个文件，而Chrome可同时下载8个，不同域名，则可并行下载

优化步骤

参考Yahoo 35条优化原则Best Practices for Speeding Up Your Web Site

1. 尽可能减少HTTP请求
   对于图片资源，频繁请求将耗费较多时间.
   a. 对于较多常用小图标，可采用CSS Sprites技术，例如logo,购物车图标等
   b. 对体积小的图案，可使用data:url将图片直接嵌入到页面中
2. 使用CDN
   CDN即内容分发网络，适合存放静态资源，如css，图片等，用户可访问离其最近的CDN节点，访问速度大大提升。
3. 使用缓存控制
   a. 对动态资源，使用cache-control请求头
   b. 对静态资源，如css，设置较长的expire
   如ExpiresDefault "access plus 10 years"
4. Gzip压缩
   基本大的网站资源都是经过gzip压缩后，由浏览器进行解压,HTTP1.1支持设置gzip请求头及响应头
   a.请求头：Accept-Encoding: gzip, deflate
   b.响应头: Content-Encoding: gzip
5. 将CSS link放到头部，JS放到尾部
   资源是并行下载的，但JS的解析是串行的，JS解析会阻塞HTML渲染
6. 使用外部js, css文件
   使用外部文件可使浏览器进行缓存
7. 减少DNS查询次数
   避免使用很多不同的域名，做好权衡（多域名同时也可增加并发下载数量）
8. 使用JS,CSS压缩工具
   比如常用的min.js,打包工具将不同js打包为一个，不同css打包为一个，然后进行压缩，去空格空行，变量名替换等
9. 避免重定向跳转301 302
10. 配置ETags
    服务器首先设置响应头的ETags
    HTTP/1.1 200 OK Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT ETag: "10c24bc-4ab-457e1c1f" Content-Length: 12195
    浏览器在接下来发送请求时先发送一个带If-None-Match请求头的request,若返回304则不更新
    GET /i/yahoo.gif HTTP/1.1 Host: us.yimg.com If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: "10c24bc-4ab-457e1c1f" HTTP/1.1 304 Not Modified
11. 懒加载
    对于不显示页面的内容不加载
12. 预加载
    对下一页内容等进行预加载
13. JS减少DOM频繁操作
14. 使用事件委托