1.分析
从用户输入 url ，按下回车到网页呈现过程中跟前端相关的过程：
- 缓存
- DNS查询
- 建立TCP连接（无关）
- 发送HTTP请求
后台处理 - 接收响应
- 接收完成 -> HTML
- 解析 查看DOCTYPE html/xml
- 逐行解析
- 遇到 html 标签
- 遇到CSS，会下载CSS，同时往下查看，如果还有CSS文件，就会一起下载，但是解析的时候不会同时解析，即下载并行，解析串行。（chrome会阻塞html渲染，ie不会，看浏览器）
- 遇到JS，跟CSS相同，下载并行，解析串行。（一定会阻塞html渲染）
2.优化对策（分治）
1. DNS查询：
- 减少DNS查询，尽量减少域名数。
2. 建立TCP连接：
- 连接复用，在发送http的请求头中设置Connection: keep-alive。
- HTTP/2.0 多路复用
3. 发送请求：
- 减少cookie体积，使用 CDN ，CDN没有cookie
- 使用 cache-control
- 同时发送多个请求，浏览器会自己去请求，比如同时请求多个CSS，JS，但是同时发送请求数量会有限制，一个域名只能发送4个，那么要是需要发送多个，那么就需要增加域名，如：css.cdn.com/n.css，js.cdn.com/n.js。跟DNS查询减少域名会有矛盾，这个时候需要权衡，假如文件很多，那么增加域名，增加请求并发数，减少请求时间，如果文件很少，那么就不要增加域名。
- 合并文件，比如合并js，合并css。
4. 接收响应
- ETag 制造304响应，不需要重新接收所有的请求，可以使用上一次的结果。
- 使用 gzip 进行压缩，文件较大时使用 gzip 压缩。
5. 接收完成
- 要写 DOCTYPE 并且不能写错。
6. CSS
- 增加域名，增加下载的并发数量
- 文件大的话就用 gzip 压缩
- 放在 head 中
- 使用 CDN，增加并发数，解除光速的限制。
7. JS
- JS放body的最后
8. 延迟加载和预加载
**9. 避免空 src 的图片
- 可以用 <img src="about:blank">
10. 使用事件委托，减少监听器
3.如何测试网站优化
chrome 开发者工具，Audits，可以查看。
网友评论