Web 性能优化详解

摘要：本文通过 “ 一个页面从输入 URL 到页面加载显示完成 ” 的各个步骤，来详解阐述一下每一步可以如何优化，从而让我们的网页更快的展现在用户眼前，即网站加载速度变的更快，这种优化也就是题目所说的 Web 性能优化。

1、首先浏览器会看该网页是否已经被缓存

优化：除了 html 文件外，尽量使用缓存，浏览器缓存控制具体可见这篇文章：浏览器缓存控制详解。

2、DNS 查询

优化：减少 DNS 查询，即尽量把所有的资源放在一个网站，这样的话只需要请求一个网站就可以下载所有的资源。

3、建立 TCP 连接

优化：TCP 连接复用，在 HTTP 协议里面加一个请求头： keep-alive，即第一次 TCP 连接建立以后不断开连接，第二次请求时复用上一次的连接。
优化：如果使用的是 http/2.0 ，它的连接复用率是更高的，即 多路复用

4、发送 HTTP 请求后台处理

优化：减少 cookie 体积，CDN 也可以减少 cookie 体积，因为 CDN 没有 cookie，尽量使用CDN去获取静态资源，就可以达到减少cookie的目的
优化：Cache-Control，如果资源已被缓存，直接就不会发请求
优化：减少 http请求也可以合并文件来达成，比如将多个 js 合并成一个，即减少文件数
优化：同时发送多个请求 ，比如浏览器会自动同时下载 css 和 js 文件（同时下载的文件数量和浏览器有关），比如 IE 可以一个域名下的文件同时下载4个，那么如果有8个文件，我们就可以放在两个域名下。这就和第二步矛盾了，那么如何权衡呢：

权衡域名数量：如果文件很少，比如只有两三个文件，那么就放在一个域名下就好了；如果文件很多，比如 10 个 css 10个 js，如果都放在一个域名下，虽然 DNS 查询次数少了，但文件的下载需要排队，这样的情况下更好的方式是增加域名数量（一般通过 CDN 来增加域名数量），减少下载文件的排队时间，从而减少了请求的时间。

5、前端接收响应

优化：响应头 ETag，可以做到 304，即如果服务器发现你的文件是最新的，它就不会给你发响应体，只给你发一个 304 ，客户端就不会再重新下载文件了，直接使用上一次下载的文件。
优化：gzip 压缩。在服务器用 gzip压缩 html css js 等文件，只要能压缩，他就会把文件打包一下再发给浏览器，这样文件大小会大幅减小，浏览器拿到 gzip 包（打包后的文件后缀是 .gz）以后，再打开压缩包进行解析，如：

但是 gzip 也有缺点，浏览器解压 gzip 会耗费浏览器的 CPU，所以这里也需要权衡：如果文件只有几Kb 大小，那就没必要压缩了，如果文件比较大的话，gzip 压缩后的优化效果是很显著的。

6、响应接收接收完成得到 HTML 文件

7、浏览器解析文件，查看 DOCTYPE 选择以什么方式解析网页

优化：这里的优化大概就是 DOCTYPE 不能写错，也不能不写，如果不写，浏览器会先用各种解析方式预读一下，最后选择一个看起来正确的方式正式解析，这样时间也浪费了，渲染方式还有可能是错的。

8、逐行解析 html

9、标签渲染

现代浏览器渲染标签一遍有两种方式：

看到一个标签，立刻在页面中渲染该标签，之后解析完 css 文件后再重新渲染一次
看到一个标签，记在 DOM 树中，等所有的 CSS 下载完毕再来渲染该标签（如 Chrome）

优化：这一部分如果非要优化的话，那就是尽量减少标签的数量，不过其实影响也不大就是了。

10、并行下载 css 文件

开始下载该 CSS 文件
继续往下看还有没有 CSS ，如果有，同时下载第二个 CSS
一个域名最多同时下载 4-8个 css 文件（IE 4 个、Chrome 是 8 个，具体数量看各个浏览器的设定）
需要注意的是：css 文件下载是并行的，解析是串行的
在 chrome 中，css 文件会阻塞 HTML 渲染，即第9步所说，需要下载完所有的 css 文件才会开始渲染页面。

优化：css 文件优化，可以使用 gzip，可以合并 css 文件，如果文件数量多，也可以增加域名数量（即使用 CDN）

11、js 文件并行下载，串行解析

JS 一定会阻塞 HTML 的渲染，即如果有一个