关于前端:当我们谈前端性能的时候我们谈的是什么

本文联合谷歌官网工具 Lighthouse，剖析了最新的前端页面性能评分标准，帮忙大家更好地了解各项性能指标，以晋升并优化相干的前端我的项目。

一、前端页面性能及其剖析工具

前端页面的性能，始终都是大家继续关注的一个畛域，因为用户的留存率和页面加载性能非亲非故。依据 google 做出的数据统计，页面拜访时长从 1s 减少到 3s，用户跳出率减少 32%。

对于前端页面性能的评估，个别是两种模式：一种是使用性能剖析工具，在线对网页各项指标进行打分评估；一种是使用性能监控，通过 performance api 或者自定义的埋点上报用户网络实在的拜访状况，而后进行统计分析。

尽管通过统计用户的数据更加实在，然而为了对页面性能可能有一个对立的量化规范，咱们往往抉择应用规范的打分工具对页面的性能进行评估。

性能剖析初期，咱们会从 chrome 的开发者工具对网页进行剖析，包含查看 load 和 DOMContentLoaded 等事件触发的工夫。起初又有了一系列的性能剖析工具，例如 webpage analyzer、WebPageTest、Yslow 等。

当初因为 google 官网曾经将他们本人开发的 Lighthouse 嵌入到开发者工具的选项卡中，因而咱们就把 Lighthouse 当做是规范评估工具。

Lighthouse 是一款开源的 web 页面性能剖析工具，并且会给出页面最佳实际的一些相干倡议。除了能够间接在 chrome DevTools 中应用外，也反对应用浏览器插件（chrome 和 Firefox）或者 npm 包（node api 或者 CLI）。

像 google 的网页 measure 以及 PageSpeed Insight 工具都是调用的 Lighthouse 对页面进行剖析。

二、如何为页面的性能打分

1. Lighthouse 的迭代与性能指标变动

Lighthouse 第一个开源的版本能够追溯到 2016 年，目前（2020 年 10 月）最新的版本是 6.4.1，曾经迭代 89 个版本。而在这几年中 Lighthouse 对于性能指标的选取也始终在更新。

google 在最新的 6.X 版本中，相比于 5.X 版本，更新了三个新的性能指标：去掉了 FMP(First Meaningful Paint)、FCI(First CPU Idle) 和 mpFID(Max Potential First Input Delay)；

退出了 TBT(Total Blocking Time)、LCP(Largest Contentful Paint) 和 CLS(Cumulative Layout Shift)。后文会针对这些指标进行具体的解说。

之前 5.X 版本的 Lighthouse

当初的 Lighthouse(6.X 版本)

2.  如何计算页面性能分数

如下图所示，在页面性能局部，Lighthouse 会综合目前的 6 个要害指标的体现状况，计算出页面的性能分数。

以最新的 6.X 计算方法来看，每个性能指标的数值会对应一个该指标的分数。例如上图中的 FCP、SI、LCP、TTI、TBT、CLS 等数值，对应的单项分数就顺次为 78、62、37、5、99、92 分。一般来说数值越小该指标分数越高。

而这 6 个指标对应的权重别离为 15%、15%、25%、15%、25%、5%，通过加权均匀计算出性能总分为图中的 60 分。

如果想晓得每个指标数值与其对应分数的具体计算方法，能够参考文章开端的材料 5 和 6。

三、要害的性能指标

在 6.0 版本的 Lighthouse 中，被去掉的要害性能指标别离是 FMP（首次有意义的渲染帧）、FCI（首次 CPU 闲暇）以及用户 mpFID（潜在最大首次输出提早）。

上面咱们从这三个被废除指标的定义开始切入，更好的了解当初版本的指标选取根据。

1.  什么是 FMP，和 FCP 有什么区别

说起 FMP 之前，咱们必须要先介绍一下 First Contentful Paint（FCP）：首次内容渲染工夫。

如其名所示，只有首次触发了浏览器的 The First Page Paint 事件，此刻的工夫点就是 FCP。但此时渲染的不肯定是重要的页面信息，比方仅仅是绘制了一个头部的 action bar 等，甚至不肯定会渲染出可见的元素。尽管在 Lighthouse6.0 中失去了保留，但对性能得分的权重从 23% 升高到 15%。

因而，FCP 不能作为一个从用户视角精确掂量页面性能好坏的指标。

在这个背景下，FMP（First Meaningful Paint：首次有意义的渲染帧）应运而生。依据官网的定义，FMP 是指从页面加载开始，到大部分或者次要内容曾经在首屏上渲染的工夫点。

那么 FMP 工夫点是怎么确认的呢，咱们先看下最根本的计算方法：

咱们首先计算布局对象（layout objects）数量（应用 LayoutAnalyzer 测试计算，详见材料 17）。

依据下图能够看出，页面加载的过程其实就是布局对象逐渐进入 layout tree 并进行渲染的过程。

layoutAnalyzer 会收集 layout objects 数量，有一个计数器叫做 

LayoutObjectsThatHadNeverHadLayout，即首次新增的 layout objects 的个数。

通过测试发现相比于其余计数器，它变动最大的时刻，往往就是页面最重要的元素渲染了的时刻。

因而 FMP 指标的计算方法为：LayoutObjectsThatHadNeverHadLayout（新增的布局对象）发生变化最大的下一个时刻（paint that follows biggest layout change）。

当然，也存在一些场景不实用上述的状况：

a)、如果页面为长页面，那么会存在不可见布局对象减少的个数比首屏内可见对象减少个数更多的状况，此时 FMP 就是不精确的

b)、有加载 web 字体的状况，文字会应用降级字体进行布局，然而默认在 loadstart 开始的 3s 内，不进行绘制，这样也会影响 FMP 的计算

针对场景 1，FMP 通过引入了 layout signifcance（布局重要度）的概念来解决该问题；针对场景 2，FMP 通过推延统计的工夫，来让指标更加正当反映页面的状况。更加具体的解决方案能够参考资料 18。

google 也针对上述 FMP 的不同场景对近 200 个页面做了试验，通过人工看页面截图，与用户感触到的 FMP 准确度做比照，后果如下：

不过最终 FMP 在 6.0 的时候被废除，次要是因为以下两点：

• 在生产环境中，FMP 对页面轻微的变动太过敏感，容易导致后果不统一。
• 该指标的定义比拟依赖于浏览器具体的实现细节，不具备可参考的规范性。

2. 代替 FMP 的 LCP 来了

上一个小章节中提到的了 FCP、FMP 的有余，因而 W3C 的性能小组也始终在想找一个适合的指标，更加实在反映用户看到页面次要内容的工夫。

有时候简略点兴许会更好（Sometimes simpler is better），依据多方对于页面性能的探讨，终于找到了一个更加精确掂量页面次要内容是否加载的办法，那就是 LCP（Largest Contentful Paint）。

LCP 指的是在视窗内，最大的内容元素被渲染的工夫。这个指标在 Lighthouse 6.0 中也正式退出，并且在最终性能评分中，有高达 25% 的权重。

LCP 应该是除了 FCP 以外最容易定义的指标，从定义能够看出，关键点就 2 个，选取哪些元素进行比拟和如何确定元素的大小。

依据官网文档，下列元素会被纳入 Largest Contentful 元素的思考范畴：

• <img>
• <svg> 外面的 <image>
• <video>
• 通过 url() 函数加载背景图片的元素
• 蕴含 text node 的块级元素或者 inline text 的子元素

那咱们如何确定元素的大小？次要是以下 4 个规定：

• 在 viewport 内可见元素的大小，如果是超出可视区域或者被裁减、遮挡等，都不算入该元素大小
• 对于图片元素来说，大小是取图片理论大小和原始大小的较小值，即 Min(理论大小，原始大小)
• 对于文字元素，只取可能笼罩文字的最小矩形面积
• 对所有元素，margin、padding、border 等都不算

google 对该指标的评估如下：LCP 是一个非常重要并且以用户感触为核心的指标；它反映了感知层面上页面的加载速度；它标记了页面次要内容中最大内容元素加载实现的工夫点；LCP 较短的页面可能让用户更快感觉到页面是可用的。

3. 被废除的 FCI 是什么，为什么和 TTI 分割这么严密

FCI（First Cpu Idle：首次 CPU 闲暇），这个指标用来掂量一个页面须要多久能力达到 minimally interactive（最低限度交互）的规范。

而最低可交互的确认须要同时满足以下两个条件：

a) 大部分在屏幕上的 UI 元素都是可交互的

b) 页面对大部分用户的输出响应，均匀工夫在一个正当的范畴内

TTI（Time To Interactive：页面可交互工夫），指的是页面达到齐全可交互状态所须要的工夫。

齐全可交互指的是同时满足上面三个条件：

a) FCP 之后，页面曾经出现了有用的内容

b) 对大部分的可见页面元素而言，曾经注册了事件回调

c) 页面对用户交互的响应在 50ms 以内

2017 年，First Interactive 指标被分成了 First Interactive 和 Consistently Interactive 两个指标；第二年 7 月，First Interactive 指标改名为 FCI，同时 Consistently Interactive 改名为 TTI。可见，FCI 和 TTI 这两个指标是一对反映用户交互响应的指标。

那么最低可交互和齐全可交互是怎么计算的呢？在介绍具体的计算方法之前，咱们须要晓得这两个指标都是含糊的并且在不同的状况下能够继续被优化改良的。

• FCI 的最低限度可交互工夫

在主线程的工夫线中，从 FMP 开始且某个工作完结后，寻找到长度为 f(t) 的工夫窗口 W。如果 W 满足在其任意时间段内，没有长度大于 250ms 的间断工作集，且前后 1s 内都没有长工作（js 执行工夫超过 50ms 的工作为长工作），那么该工作完结的时刻就是咱们定义的 FCI。其中 f(t) = 4 e^(-0.045 t) + 1。

下图红框中所指的工夫点即为 FCI

具体的推导过程能够参考资料 11，能够更粗浅的了解到为什么 FCI 是含糊的一个概念。

• TTI 的齐全可交互工夫

从网络和主线程的工夫线中，找到第一个 5s 的窗口期 W，在 W 时间段满足：任意时刻没有超过两个同时进行中的网络申请、没有超过 50ms 的长工作。则 W 前的最初一个长工作完结时刻，就是咱们说的 TTI。

下图红框中所指的工夫点即为 TTI：

只管有些人指出，FCI 在某些时候比 TTI 更有意义，然而它们之间的差别还是不足以让 Lighthouse 保留两个类似的指标。

因而在 Lighthouse 6.0 里，最终抉择还是应用 TTI 来取代 FCI。

4. mpFID 与新增的 TBT 指标

mpFID（max potential First Input Delay）指的是从用户输出到页面真正开始处理事件回调的潜在（可能）最大延迟时间。

mpFID 具体的计算方法，是从以 FCP 为开始到以 TTI 为完结的这段时间里，抉择其中 js 执行工夫最长的工作，用它耗费的工夫再减去 50ms。

然而 mpFID 示意的只是一个最大延迟时间，与用户理论输出的延迟时间是有差距的，用户在不同时刻的输出失去的 FID 也会不同，因而 mpFID 并不能实在反映页面对用户输出的响应工夫。

在 5.X 版本计算性能分数的时候，mpFID 权重为 0，并没有参加评分。尽管这个指标不再显示在报告中，但其实在 JSON 数据中还有保留，而 mpFID 也是官网仍然认可的一个要害用户体验指标。

那到底什么是 TBT（Total Blocking Time），为什么要在性能报告中抉择用它代替 FID 呢？

先看下定义：TBT 指的是页面响应用户输出时，曾经被阻塞的工夫总和。

具体的计算方法比拟明确，统计从 FCP 到 TTI 之间的所有长工作，并将它们的阻塞局部工夫进行求和，即为 TBT。其中阻塞局部工夫指的是长工作执行工夫超过 50ms 的局部，例如一个长工作执行了 70ms，那么阻塞工夫就是 20ms。

能够看出，TBT 相比于 mpFID 是一个更加稳固的指标，相较而言能更加实在地反映页面对于用户输出的响应均匀延时。

5.  新增的 CLS

CLS (Cumulative Layout Shift：累积布局变动)，它是用来掂量视觉界面稳定性的一个指标。

这个数据的获取是由 Layout Instability API（详见参考资料 14）提供的，计算方法如下：

layout shift score = impact fraction * distance fraction

其中 impact fraction 指的是对整个视窗的多少造成了影响。例如下图中的文字占整个视窗的 50%，并且下一帧比上一帧向下挪动了 25%，因而对整个页面的 75% 造成了影响，因而 impact fraction 为 0.75。

distance fraction 比拟好了解，就是发生变化间隔占整个视窗的比例，比方下面的例子，挪动 25% 即 distance fraction 为 0.25。

综上，图示 demo 的 CLS 值即为 0.75 * 0.25 = 0.1875。更具体的计算方法能够参考资料 13、14。

举一个 CLS 理论影响用户体验的例子：如下图所示，用户想点勾销按钮，后果页面忽然产生了布局变动，确认按钮呈现在了之前勾销的地位…

可见，CLS 是更从用户体验登程，而新增的一个性能评判指标。

目前 CLS 作为新晋指标所占权重还不大，仅为 5%，然而 Lighthouse 曾经在思考下一个大版本中减少其权重了。

6. 始终都在的 Speed Index

速度指数 Speed Index（SI）是用来掂量页面可见内容填充快慢的指标，计算过程应用是开源工具 speedline（材料 16）。

speedline 通过对页面进行视频录制，并统计首帧与最初一帧变动的时间差来计算 speed Index 的值。

值得一提的是 SI 的最终分数，会通过和数据库中实在网站的 SI 进行比拟算出。目前 SI 分数与得分规范如下表所示：

四、总结与瞻望

回顾上述指标的更替过程咱们能够发现，不论是从 FMP 到 LCP、FCI 到 TTI 还是 FID 到 TBT，目前在性能指标的选取上，都曾经在朝着更加稳固的方向后退：指标的定义越来越扼要清晰，并且计算的形式也趋于标准化。

然而咱们也应该晓得这里没有银弹，每个指标都会有其局限性。在很多场景下，并不能认为得分低，就肯定代表着页面的体验差。而咱们也只有理解了这些指标的背地原理，能力更加迷信地联合性能得分对页面做出评估。

因为性能相干的技术更新速度迭代较快，如果文中有疏漏的中央，欢送交换斧正。

五、参考资料

1. Find out how you stack up to new industry benchmarks for mobile page speed 
2. Performance.timing Api 
3. What’s New in Lighthouse 6.0
4. Web Vitals
5. Lighthouse Scoring Calculator
6. Lighthouse performance scoring
7. WebPageTest Demo
8. Time to First Meaningful Paint
9. First Interactive and Consistently Interactive
10. Largest Contentful Paint (LCP)
11. First Interactive and Consistently Interactive
12. How Mercado Libre optimized for Web Vitals (TBT/FID)
13. Cumulative Layout Shift (CLS)
14. layout-instability
15. Speed Index
16. speedline
17. Layout Analyzer
18. Time to First Meaningful Paint

作者：Huang Wenjia