当谈及 Web 性能优化时，我们该关注哪些性能指标

迈不过友情╰ 2022-09-11 12:10 296阅读 0赞

点击上方 三分钟学前端，关注公众号

回复交流，加入前端编程面试算法每日一题群

面试官也在看的前端面试资料

前端页面性能是影响用户体验的关键因素，用户打开网站时间太久、白屏时间过长、操作卡顿等，都会导致用户离开页面，严重影响用户的留存率。Google DoubleClick 研究表明：如果一个移动端页面加载时长超过 3 秒，用户就会放弃而离开。BBC 发现网页加载时长每增加 1 秒，用户就会流失 10%。

那么，如何去计算页面的性能，以便于更好地衡量和改进前端页面性能，这就需要前端性能指标，本文简单介绍每一种性能指标的定义，旨在帮助你理解性能指标，具体优化及详细解读将在后面章节中介绍

## 性能指标 ##

以下分为三个过程来看性能指标：

*  文档加载过程
 *  文档渲染呈现过程
 *  交互过程

### 文档加载过程 ###

下图是 W3C 的 Navigation Timing 的处理模型，从当前浏览器窗口卸载旧页面开始，到新页面加载完成，整个过程一共被切分为 9 个小块：

*  提示卸载旧文档
 *  重定向/卸载
 *  应用缓存
 *  DNS 解析
 *  TCP 握手
 *  HTTP 请求处理
 *  HTTP 响应处理
 *  DOM 处理
 *  文档装载完成

每个小块，取 Unix 时间戳，两两事件之间计算时间差，从而获取中间过程的耗时（精确到毫秒级别）。

![b8cee6cd0ebc6f4c6db9fe353598bd40.png][]

#### 解读 ####

![f1ef5d7f1e3b6627258585a2cf3536f1.png][]

文档加载过程主要包含以下 几个性能指标：

#### TTFB ####

Time to First Byte，是发出页面请求到接收到应答数据第一个字节所花费的毫秒数，这个时间段内包括 DNS 查找、TCP 连接和 SSL 连接

TTFB 不仅仅是在服务器上花费的时间，还包括设备请求发送到服务器，再从服务器返回到设备的时间，它计算的是整个延迟的往返时间。

#### DCL ####

DOMContentLoaded，下图更直观的表示下

![92175212455878c241e91c9d9cc24624.png][]

什么是 DOMContentLoaded？

首先我们先思考一下，如何衡量网页的加载性能？有人认为可以通过计算从空白到完全加载的过程，但其实有些图片等可能加载较慢，但不影响整个页面的正常使用，所以，我们仅仅需要在空白网页看到内容即可

所以，我们也可以通过计算这个网页从空白到出现内容所花费的时间，来衡量网页文档的加载性能，那么该如何计算这段时间喃？DOMContentLoaded 就是，当初始的 **HTML** 文档被完全加载和解析完成之后，**DOMContentLoaded** 事件被触发，而无需等待样式表、图像和子框架的完全加载

#### L ####

Load，onLoad 事件触发所需时间，仅在页面所有资源都加载完毕后（比如图片，CSS），onLoad 事件才被触发

### 文档渲染呈现过程 ###

#### FP&FCP ####

*  FP（First Paint）：首次绘制，这个指标用于记录页面第一次绘制像素的时间
 *  FCP（First Contentful Paint）：首次内容绘制，这个指标用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间，也包括带有正在加载中的 Web 字体的文本

这两个指标看起来大同小异，但是 FP 发生的时间一定大于等于 FCP，如下图是掘金的指标：

![700fe28a5722f45a8add7d906960cd1f.png][]

FP 指的是绘制像素，比如说页面的背景色是灰色的，那么在显示灰色背景时就记录下了 FP 指标

但是此时 DOM 内容还没开始绘制，可能需要文件下载、解析等过程，只有当 DOM 内容发生变化才会触发，比如说渲染出了一段文字，此时就会记录下 FCP 指标

我们可以把这两个指标认为是和白屏时间相关的指标

![6d0c46eff60767e6b2a9361bd434d77a.png][]

#### FMP ####

First Meaningful Paint，是指页面的首要内容出现在屏幕上的时间，对于不同的站点，首要内容是不同的，例如：

*  博客文章：【大标题 + 首屏文字】是首要内容；
 *  百度或 Google 的搜索结果页：【首屏的结果】就是首要内容；
 *  淘宝等购物网站：【图片】会极为重要，因此它是首要内容；

在 Lighthouse 6.0 中已不推荐使用 FMP，建议使用 LCP 代替

#### LCP ####

Largest Contentful Paint，最大内容绘制，用于记录视窗内最大的元素绘制的时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改变，另外该指标会在用户第一次交互后停止记录。指标变化如下图：

![4e9414fb5861336d0b00c21aac65be62.png][]

LCP 其实能比 FP、FCP、FMP 更能体现一个页面的性能好坏程度，因为这个指标会持续更新。举个例子：当页面出现骨架屏或者 Loading 动画时 FCP 其实已经被记录下来了，但此时页面内容其实并未呈现

在 2.5 秒内表示体验优秀

![85d8e9f2fac09cd47cfad9970da74206.png][]

`LCP` 目前并不会计算所有元素，因为这样会使这个指标变得非常复杂，它现在只关注下面的元素：

*  `<img>` 元素
 *  `<image>`元素内的`<svg>`元素
 *  `<video>` 元素
 *  通过 `url()` 函数加载背景图片的元素
 *  包含文本节点或其他内联文本元素子级的块级元素。

#### SI ####

Speed Index，用于度量页面加载过程中内容可视化显示的速度，是 Lighthouse 的六个度量标准之一

![4abe6eb06a89384017ec206b4a28c39e.png][]

具体如何测量喃？首先在浏览器中捕获页面加载的视频，然后对每 100 毫秒间隔的页面截图计算页面填充的百分比，可以得到这样一个曲线（纵轴是页面可视区域内容填充完成度，横轴是时间）

![367909fc2e26a7d330df7293482f1e40.png][]

上图中的两个都是在 10s 时页面填充完成，但Example 1（左图）在 2s 是就已经填充了 80% 的内容，而 Example 2（右图）在 8s 时才填充 80%

> 计算 SI ：
> 
> Example 1：Speed Index = (80% \* 2) + （20% \* 10）= 3.6
> 
> Example 2：Speed Index = (80% \* 8) + （20% \* 10）= 8.4

其中，SI：0-3.4 为最优

![21cdccb1f609fad59a9a288a3e272a54.png][]

#### FSP ####

First Screen Paint，即页面从开始加载到首屏内容全部绘制完成的时间，用户可以看到首屏的全部内容

### 交互过程 ###

#### TTI ####

Time to Interactive，用于表示网页首次完全达到可交互状态的时间点

完全达到可交互状态的时间点是从 FCP 开始，在最后一个长任务（Long Task）完成的时间，并且在随后的 5 秒内网络和主线程是空闲的，如下图：

![outside\_default.png][outside_default.png]

Google 提出了一个 RAIL 模型：对于用户交互（比如点击事件），推荐的响应时间是 100ms 以内。那么为了达成这个目标，推荐在空闲时间里执行任务不超过 50ms（W3C 也有这样的标准规定），这样能在用户无感知的情况下响应用户的交互，否则就会造成延迟感

![9811a435e5e1a213cd5ae2a95590d17f.png][]

这是一个很重要的用户体验指标，代表着页面何时真正进入可用的状态。毕竟光内容渲染的快也不够，还要能迅速响应用户的交互。想必大家应该体验过某些网站，虽然内容渲染出来了，但是响应交互很卡顿，只能过一会才能流畅交互的情况。

#### FCI ####

First CPU Idle，页面首可交互时间

与 TTI 不同的是：FCI 发生在用户可以开始与页面交互时；TTI 发生在用户完全能够（可持续）与页面交互时

#### FID ####

First Input Delay，首次输入延迟，用于记录在 FCP 和 TTI 之间用户首次与页面交互时响应的延迟

就是看用户交互事件触发到页面响应中间耗时多少，如果其中有长任务发生的话那么势必会造成响应时间变长

![outside\_default.png][outside_default.png] ![e4bd5157cbb1130976b8cf8bde79d3ec.png][]

#### FPS ####

Frames Per Second，用于表示每秒可以重新绘制的帧数，是衡量应用流畅度的一个非常重要的指标，60fps（每次绘制 16.7ms） 是页面流畅的目标，否则用户便会感觉到页面卡顿

### 核心性能指标 ###

以上我们学习了 13 个性能指标，但最常用、最关键的是以下四个核心指标：

*  白屏时间：页面空白时间，FP&FCP
 *  首屏时间：页面可视区域内容以完全呈现时间，FSP
 *  可交互时间：用户首次可交互时间，FCI
 *  可持续交互时间：用户首次可完全可持续交互时间，TTI

### 总结与思考 ###

本文，我们学习了从文档加载到用户交互所涉及的性能指标：

*  文档加载过程：
    
     *  TTFB：从请求开始到接收第一字节的时间
     *  DCL：空白到出现内容所花费的时间
     *  L：onLoad 事件触发所需时间
 *  渲染呈现过程：
    
     *  FP&FCP：首次绘制（FP，可能是背景色或loading），首次内容绘制时间（FCP）
     *  FMP：首要内容出现在屏幕上的时间
     *  LCP：视窗内最大的元素绘制的时
     *  SI：页面加载过程中内容可视化显示的速度
     *  FSP：从开始加载到首屏内容全部绘制完成的时间
 *  交互过程：
    
     *  TTI：网页首次完全达到可交互状态的时间点
     *  FCI：页面首可交互时间
     *  FID：首次输入延迟
     *  FPS：每秒可以重新绘制的帧数，用于衡量应用流畅度

其中最重要的是白屏时间（FP&FCP）、首屏时间（FSP）、可交互时间（FCI）、可持续交互时间（TTI），下一章，我们将走进新一代性能指标 Web Vitals

#### 参考链接 ####

*  MDN
 *  Web 性能指标：https://juejin.cn/post/6844904153869713416

## 最后 ##

欢迎关注「三分钟学前端」，回复「交流」自动加入前端三分钟进阶群，每日一道编程算法面试题（含解答），助力你成为更优秀的前端开发！

号内回复：

「**网络**」，自动获取三分钟学前端网络篇小书（90+页）

「**JS**」，自动获取三分钟学前端 JS 篇小书（120+页）

「**算法**」，自动获取 github 2.9k+ 的前端算法小书

「**面试**」，自动获取 github 23.2k+ 的前端面试小书

「**简历**」，自动获取程序员系列的 `120` 套模版

》》面试官也在看的前端面试资料《《

“在看和转发”就是最大的支持

[b8cee6cd0ebc6f4c6db9fe353598bd40.png]: /images/20220828/cb0e3f8023df45c4b8d68c27515e9032.png
[f1ef5d7f1e3b6627258585a2cf3536f1.png]: /images/20220828/97d2ee286f2a4576bf41404f442b418b.png
[92175212455878c241e91c9d9cc24624.png]: /images/20220828/d845801c34244ac280ada315658ec125.png
[700fe28a5722f45a8add7d906960cd1f.png]: /images/20220828/ee11ba9a58304a70a5728f592b60b056.png
[6d0c46eff60767e6b2a9361bd434d77a.png]: /images/20220828/437cb231ff0343c88cbfa07d89c8abda.png
[4e9414fb5861336d0b00c21aac65be62.png]: /images/20220828/5fc71301538a467b9dc094666efb6d5f.png
[85d8e9f2fac09cd47cfad9970da74206.png]: /images/20220828/3f0d16149f75441aab5abe15d7faa948.png
[4abe6eb06a89384017ec206b4a28c39e.png]: /images/20220828/a5e9d24da7e64b68a9c0cc511b2a63bb.png
[367909fc2e26a7d330df7293482f1e40.png]: /images/20220828/c4a9d2a9c78b4bf4b4e9304c0257057e.png
[21cdccb1f609fad59a9a288a3e272a54.png]: /images/20220828/014c0a71ff834d9e8768034d1e32c015.png
[outside_default.png]: /images/20220828/0886034b5cfe44aab98e79b6db70fa25.png
[9811a435e5e1a213cd5ae2a95590d17f.png]: /images/20220828/169c859206ff4cabb87ae56e67272318.png
[e4bd5157cbb1130976b8cf8bde79d3ec.png]: /images/20220828/075ec9ce499f48d288cf18b88f4bde07.png