深入探究“在浏览器输入URL到渲染页面”（中）性能优化

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。

关于这道经典的面试题，笔者准备写三篇文章来对知识点进行深度和广度的挖掘：

• 深入探究“在浏览器输入URL到渲染页面”（上）过程剖析
• 深入探究“在浏览器输入URL到渲染页面”（中）性能优化
• 深入探究“在浏览器输入URL到渲染页面”（下）模拟面试

在 第一篇文章 中写到，用户在输入 url 并回车之后，浏览器经历了下面这些阶段：重定向 → 拉取缓存 → DNS 查询 → 建立 TCP 连接 → 发起请求 → 接收响应 → 处理 html 元素 → 页面进行渲染。因此性能优化也可以从这几个阶段入手：

1. 网络请求过程

减少请求数量：

• 永久重定向
• 浏览器缓存
• DNS 预解析
• 合并文件
• 使用雪碧图
• 避免使用空的 src 和 href
• 不使用CSS @import

减小请求资源大小：

• 资源打包压缩
  • js 压缩
  • html 压缩
  • css 压缩
  • tree-shaking 剔除没用到的代码
  • 服务端开启 gzip 压缩
• 图片资源优化
  • 不要在 html 里缩放图像
  • 使用雪碧图（css sprite）
  • 使用字体图标（iconfont）
  • 使用 webp

提升网络传输速率：

• 使用 HTTP2
• 静态资源走 CDN 引入

2. 浏览器渲染过程

资源加载位置：

• css 文件放在
• js 文件放在 底部

资源加载时机：

• 使用预加载机制
• 异步 script 标签
• 模块按需加载
• 图片懒加载

资源渲染过程：

• 减少重排与重绘
• 使用服务端渲染

3. 其他

• 使用 替代 和
• 防抖和节流

我们常将网络性能优化措施归结为三大方面：减少请求数量、减小请求资源大小、提升网络传输速率。

减少请求数量：

原理：当页面发生了重定向，就会重新发送 url 请求，延迟整个 HTML 文档的传输。 如果一定要使用重定向，就使用 永久重定向。

实例：

推荐阅读：搞懂 HTTP 重定向 - 如何优雅地使用 301

原理：使用 或 这类强缓存时，在缓存不过期的情况下，可以直接使用缓存的文件，而不向服务器请求资源。若强缓存失效，还可以使用 或 这类协商缓存，向服务器发送请求，在资源不发生变化的情况下，可以直接从本地缓存加载资源；若资源发生变化，则服务器会将更新后的资源发送给浏览器。

使用：在 文件的 头部中加上 标签。
标签中①设置属性 ，赋值为 ；②设置属性 ，赋值为 要解析的域名 （写域名和端口号就可以了）。

实例：

原理：将多个文件合并，这样在请求时就只发送一个 HTTP 请求来请求资源。

但这样也有它的坏处：①首屏渲染变慢；②缓存失效问题。

因此对于文件合并，有两点改进：①公共库合并；②不同页面单独合并。

原理：将网站上用到的一些图片整合到一张单独的图片中，从而减少请求图片的次数。

使用：

• 合成雪碧图： 配置 webpack ： 插件提供了自动合成雪碧图的功能并且可以自动生成对应的样式文件。

通过上面配置就能将目录下的所有 文件合成雪碧图，并且输出到对应目录，同时还可以生成对应的样式文件，样式文件的语法会根据你配置的样式文件的后缀动态生成。

如果不使用 webpack 插件的话，也可以使用在线生成雪碧图的网站：www.toptal.com/developers/

• 使用雪碧图： 通过 属性来设置资源在雪碧图中的哪一个位置。

原理：a 标签设置空的 href ，会重定向到当前的页面地址；form 设置空的 method ，会提交表单到当前的页面地址。

原理：使用 css @import 会导致 css 无法并行下载，因为使用 @import 引用的文件只有在引用它的那个文件被下载、解析之后，浏览器才会知道还有另外一个 css 需要下载，这时才去下载这个 css 文件，然后在下载后开始解析、构建 layout tree 等一系列操作。因此 css @import 引起的 css 解析延迟会加长页面留白期。

减小请求资源的大小：

• 压缩 JS 代码

在 webpack 的 production 模式中，会自动压缩 js 代码。

• 压缩 HTML 代码 使用 html-webpack-plugin 中的 minify 进行压缩。

• 压缩 CSS 代码 使用 cssnano 压缩 css。在 postcss.config.js 中进行配置。

• 使用 tree-shaking 剔除未使用过的代码

作用：?可以去除未引用代码，减少代码体积。

使用： 在 中，添加字段：sideEffects: false，告诉 Webpack 所有代码都没有副作用（都可以进行tree shaking），然后再根据不同的环境进行不同的配置。

：

开发环境下的配置：

生产环境下的配置：
在生产环境下， 默认会添加 的配置，因此只需写一行 mode: 'production' 即可。

注意：

1. 如果想要对一段代码做 处理，那么就要避免引入整个库到一个 JS 对象上，如果你这么做了，Webpack 就会认为你是需要这整个库的，这样就不会做 Tree Shaking 处理。

2. Tree Shaking 只支持 ESM 的引入方式，不支持 Common JS 的引入方式。

ESM: export + import
Common JS: module.exports + require

• 使用 gzip 压缩

流程：①浏览器发起请求时，在请求头中设置属性 表明浏览器支持 gzip 。②服务器根据请求头信息判断浏览器是否支持 gzip ，支持的话就向浏览器传送压缩过的内容，并在响应头上带上 ；不支持的话则直接向浏览器发送未经过压缩的内容。③浏览器接收到服务器响应后根据响应头判断内容是否被压缩，如果被压缩则解压缩后再显示内容。

详细原理可参考 gzip压缩算法。

• 不要在 HTML 里缩放图像 不要使用 的 width、height 缩放图片，如果用到小图片，就使用相应大小的图片。如果需要 ，那么图片本身（mycat.jpg）应该是 100x100px 的，而不是去缩小 500x500px 的图片。

• 使用字体图标（iconfont）代替图片图标 字体图标就是将图标制作成一个字体，使用时就跟字体一样，可以设置属性如 、 等。并且字体图标是矢量图，不会失真，而且生成的文件特别小。

• Base64 将图片的内容以Base64格式内嵌到HTML中，可以减少HTTP请求数量。但是，由于Base64编码用8位字符表示信息中的6个位，所以编码后大小大约比原始值扩大了 33% 。

• 使用 Webp webp 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼无差异的图像质量；同时具备了无损和有损的压缩模式、alpha 透明以及动画的特性，在 jpeg 和 png 上的转化效果都想当优秀、稳定和统一。

提升网络传输速率：

原理：在一次 HTTP 请求中，底层会通过 tcp 建立连接。而 tcp 协议存在 3 次握手，4 次挥手阶段，这些机制虽然保证了 tcp 的可靠性，但降低了传输效率，为了解决这个问题，我们可以使用 http2 来增加传输时候效率。

http2 相比 http1 主要有以下几点优化：

• 解析速度快 服务器解析 HTTP1.1 的请求时，必须不断地读入字节，直到遇到分隔符 CRLF 为止。而解析 HTTP2 的请求就不用这么麻烦，因为 HTTP2 是基于帧的协议，每个帧都有表示帧长度的字段。
• 多路复用 HTTP1.1 如果要同时发起多个请求，就得建立多个 TCP 连接，因为一个 TCP 连接同时只能处理一个 HTTP1.1 的请求。在 HTTP2 上，多个请求可以共用一个 TCP 连接，这称为多路复用。同一个请求和响应用一个流来表示，并有唯一的流 ID 来标识。 多个请求和响应在 TCP 连接中可以乱序发送，到达目的地后再通过流 ID 重新组建。
• 首部压缩 多次请求中，可能有很多数据都是重复的，HTTP/2 在客户端和服务器端使用“首部表”来跟踪和存储之前发送的键－值对，传输时只需要传递索引值即可，对于相同的数据，不再通过每次请求和响应发送。
• 服务器端推送 服务器根据页面内容，主动把页面需要的资源传给客户端，减少请求数。

原理：
当访问一个网站时，如果没有部署 CDN ，浏览器获取资源就是通过 DNS 解析得到 ip 后，向该 ip 地址请求资源；
如果该网站部署了 CDN ，那么就

• 浏览器向本地 DNS 发出请求以获取 ip
• 本地 DNS 服务器依次向根域名服务器、顶级域名服务器、权限域名服务器发出请求，得到全局负载均衡系统（GSLB）的 ip 地址
• 本地 DNS 服务器再向 GSLB发出请求。
• GSLB 会根据请求中携带的 ip 地址判断用户的位置，筛选出距离用户较近的本地负载均衡系统（SLB），并将该 SLB 的 ip 地址作为结果返回给本地 DNS 服务器。
• 本地 DNS 服务器将 SLB 的 ip 地址返回给浏览器，浏览器向 SLB 发出请求。
• SLB 根据浏览器请求的资源和地址，选出最优的缓存服务器返回给浏览器。
• 浏览器再根据 SLB 发回的地址重定向到缓存服务器。
• 如果缓存服务器有浏览器需要的资源，就将资源返回给浏览器。如果没有，就老老实实向源服务器请求资源，再将资源发给浏览器以缓存在本地。

查看：执行以下命令查看用户与服务器之间经过的所有路由器：

页面要进行渲染，首先要先加载资源，那么优化便可分为资源加载位置、资源加载时机和资源渲染过程。

资源加载位置：

优先使用外部文件样式，其次才是本文件的样式；

也是优先使用外部脚本文件，其次才是本文件的脚本代码。

资源加载时机：

原理：在 html 加载时，会加载很多第三方资源，这些资源的优先级是不同的，一些重要资源需要提前进行获取，而一些资源可以延迟进行加载。我们可以使用?DNS 预解析，预加载，预获取，预连接，预渲染来管理页面资源的加载。

使用：

标签有两个属性： 和 ，可以控制文件的执行顺序。

• defer：异步加载文件，和 HTML 解析同步进行。文件加载完成之后，在 HTML 解析完成之后执行，效果类似于将代码放在 body 底部。
• async：异步加载文件，和 HTML 解析同步进行。文件加载完成之后立即执行，不管 HTML 是否解析完成。

待补充......

概念：懒加载也叫延迟加载、按需加载，指的是在页面渲染时不一次性渲染所有图片，而是只加载在页面可视区内的图片。

优点:

• 减少无用资源的加载：使用一次性将所有图片加载出来，但用户可能只浏览一部分图片而已，那些没被浏览到的图片其实可以先不用渲染出来。
• 提升用户体验：一次性加载太多图片，可能需要等待的时间较长，这样就影响了用户体验，使用懒加载后，渲染压力就会变小很多。
• 防止加载过多图片而影响其他资源文件的加载。

原理： 给 标签定义一个 属性，赋值为图片地址，并将 属性赋值为 ，这样图片就渲染不出来了，当图片出现在页面可视区的时候，再将 的值赋给 即可完成懒加载。

注意： 是自定义的，你也可以定义为 。

这里的难点在于怎么确定可视区域，有两种方法：

• 方法一：使用原生 js 知识点：
  （1） 是浏览器可视区的高度（不包含浏览器地址栏、书签那块）
  （2） 是浏览器滚动过的距离
  （3） 是图片元素顶部距离可视区顶部的高度（包括滚动条的距离）
  （4）图片加载条件： 图片顶部到文档顶部的距离 < 浏览器可视高度 + 浏览器滚动过的高度，也就是

代码实现：

• 方法二：使用 用法： 是浏览器原生提供的构造函数，接受两个参数：是可见性变化时的回调函数，是配置对象（该参数可选）。

构造函数的返回值 是一个观察器实例，实例的方法可以指定观察哪个 DOM 节点。

如果要观察多个节点，就要多次调用这个方法。

资源渲染过程：

1. 缓存 DOM

原理：查询 DOM 比较耗时，因此在同一个节点需要多次查询的情况下，可以缓存 DOM 。

使用：

2. 减少 DOM 深度及 DOM 数量

原理：HTML 中标签元素越多，标签的层级越深，浏览器解析 DOM 并绘制到浏览器中所花的时间就越长。

3. DOM 读写分离

不要两个读操作之间，加入一个写操作。

原理：当 DOM 变动和样式变动时，会触发页面的重新渲染。但浏览器会尽量把所有的变动集中在一起，排成一个队列，然后一次性执行，尽量避免多次重新渲染。这时如果在修改样式中间进行了其他不是修改样式的操作，就会触发多次重排。

4. 批量操作 DOM

原理：在元素脱离文档流之后，对该元素进行的多次操作，不会触发回流。等操作结束后，再将元素放回标准流即可达到效果。

脱离文档流的方法：

• ①隐藏元素；
• ②使用文档碎片；
  • 原理：使用 对象，在内存中操作 DOM 不会引发页面重排。
• ③拷贝节点；
• ④ 属性设置为 或 。

实例：对 DOM 节点进行多次操作：给每个 新增一个 ，要使其不会触发回流

5. 合并修改样式

原理：如果要给一个节点操作多个 css 属性，而每修改一种样式都会造成回流，因此尽可能将多次操作合并成一个。

实例：

6. 避免使用 table 布局

一个小的改动可能会使整个进行重新布局

7. 给图片指定大小

原理：因为 元素是内联元素，所以在加载图片后悔改变宽高，因此最好在渲染前就指定图片的大小，或者让其脱离文档流。

8. 合理使用硬件加速（GPU 加速）

我们知道，浏览器页面的绘制是由 GPU 完成的，因此减少重排重绘也可以从 GPU 缓存 这方面入手。例如：把那些会发生大量重排重绘的元素提取出来，单独触发一个渲染层，那么这个元素就不会影响其它层一块重绘了。

创建渲染层的方式：

满足以下任意情况便会创建层：

• 设置为 （推荐）
• 元素
• 元素
• css 3D

• css 滤镜
• 混合插件(如 Flash)
• 元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里)
• 元素有一个z-index较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

最常用的方法，就是给某个元素添加下面的样式：

在webkit内核的浏览器中，另一个行之有效的方法是：

待补充......

原理：在短时间内对一个元素进行多次的重复操作，可以设置防抖和节流，防止该操作的频繁触发。

实现：

• 防抖： 基础版：每次触发事件后都会等过了指定的延迟时间才执行 函数。

进阶版：事件触发的时候马上执行 函数。

• 节流： 定时器版

时间戳版

两者合并版

希望在每一帧刚开始的时候对页面进行更改，目前只有使用 requestAnimationFrame 能够保证这一点。使用 setTimeout 或者 setInterval 来触发更新页面的函数，该函数可能在一帧的中间或者结束的时间点上调用，进而导致该帧后面需要进行的事情没有完成，引发丢帧。
当你准备更新动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数(即你的回调函数)。

?告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

注意：若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用

语法：

参数： 表示下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。

返回值：一个整数，请求 ID ，是回调列表中唯一的标识。用于传值给以取消回调函数。

范例：