Web通信过程
首先我们看下从用户输入网址到收到响应这个过程中，有哪些步骤：
- 缓存：
浏览器首先会查看该内容是否有被缓存，没有则进行DNS解析 - DNS解析
浏览器会查找浏览器上的DNS缓存信息，没找到则查找本机系统目录的dns文件信息，找不到则往ISP发送DNS解析请求，请求成功获得ip地址 - 建立TCP连接
三次握手建立通信连接 - 发送HTTP请求
- 接收响应
- 浏览器解析接收到的响应
检查Doctype,逐行解析，下载相应的CSS，JS
其中IE会不等CSS下载完就对HTML进行解析显示，而Chrome则要等CSS下载结束才会开始页面渲染。
若有多个css或js文件属于同一域名，IE可同时下载4个文件，而Chrome可同时下载8个，不同域名，则可并行下载
优化步骤
参考Yahoo 35条优化原则Best Practices for Speeding Up Your Web Site
- 尽可能减少HTTP请求
对于图片资源，频繁请求将耗费较多时间.
a. 对于较多常用小图标，可采用CSS Sprites技术，例如logo,购物车图标等
b. 对体积小的图案，可使用data:url将图片直接嵌入到页面中 - 使用CDN
CDN即内容分发网络，适合存放静态资源，如css，图片等，用户可访问离其最近的CDN节点，访问速度大大提升。 - 使用缓存控制
a. 对动态资源，使用cache-control请求头
b. 对静态资源，如css，设置较长的expire
如ExpiresDefault "access plus 10 years" - Gzip压缩
基本大的网站资源都是经过gzip压缩后，由浏览器进行解压,HTTP1.1支持设置gzip请求头及响应头
a.请求头：Accept-Encoding: gzip, deflate
b.响应头: Content-Encoding: gzip - 将CSS link放到头部，JS放到尾部
资源是并行下载的，但JS的解析是串行的，JS解析会阻塞HTML渲染 - 使用外部js, css文件
使用外部文件可使浏览器进行缓存 - 减少DNS查询次数
避免使用很多不同的域名，做好权衡（多域名同时也可增加并发下载数量） - 使用JS,CSS压缩工具
比如常用的min.js,打包工具将不同js打包为一个，不同css打包为一个，然后进行压缩，去空格空行，变量名替换等 - 避免重定向跳转301 302
- 配置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 - 懒加载
对于不显示页面的内容不加载 - 预加载
对下一页内容等进行预加载 - JS减少DOM频繁操作
- 使用事件委托
