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 的渲染，即如果有一个 <script> 标签在 <h1>的上面，JS 文件下载完以后才会开始解析 <h1>

• 优化：和 css 文件一样，可以使用这三个方法来优化：gzip 、 CDN 以及 合并文件。

• js文件放在 body 的最后，css 放在head 里面是最常见的优化方法，原理如下：css 和 js 在大部分时候都会阻塞浏览器对页面的渲染，所以理论上我们应该把所有阻塞渲染的东西都放在 html 的后面，但是 css 文件有个特点： 在chrome里面，css就算放到最后，在没有下载完css之前，它也不会去渲染页面，因此我们干脆把css放在最前面，让浏览器早一点去下载css，即 css 放前面的原因是尽早下载。而js放到后面的作用是：我们先把能看的东西展示在用户眼前，保证用户优先看到一个完整的画面，即 js 文件放在 body 的最后的作用是尽早显示页面，另外js放在后面因也可以获取到节点，如果放在最前面，页面还没有渲染完，是获取不到任何节点的，放后面也不用专门监听 事件了。

其他优化技巧

使用 CDN

1. 什么是 CDN：Content Delivery Network 内容分发网络，把一个很远的资源分布到全国(球)各地，让全国(球)各地的用户访问都很快。

2. CDN 的原理：如果服务器距离用户很远，访问服务器的时间就会增加，最佳优化方法就是使用 CDN ，比如用户访问谷歌，直接访问美国的服务器就会很慢，但是 CDN 可以通过 DNS 查询，给用户动态的返回一个最近的服务器 ip 地址，从而减少用户与服务器的物理距离，从而减少请求和响应的时间。

3. CDN 的作用：增加并发下载数；解除光速的限制。

延迟加载 & 预加载

如果一页的内容有很长，可以优先下载解析第一屏的内容，剩下的内容当用户滚动到时再显示。 即懒加载。用户没有看到的地方先不加载，还可以节省流量。

预加载，当用户还没有抵达下一页时，先提前下载好内容，当用户想要跳转到下一页时就会非常的快。

压缩图片

• 检查gif图片的调色板大小是否匹配图片颜色数。

• 可以把gif转成png。除了动画，gif一般可以转成png8。

• 运行pngcrush或其它工具压缩png。

• 运行jpegtran或其它工具压缩jpeg。

测试

在 chrome 的控制台，点击Audits 标签，点击Run audits 即可。

作者：EnochQin
链接：https://www.jianshu.com/p/c0734b29f374