【性能优化】关键性能指标及测量标准
前言
随着时代的发展，业内曾经提出过很多性能优化相关的标准和规范，从最初2007年雅虎提出34条军规，到2020年google开始推广Web Vitals，优化技术已经有将近20多年的发展历史，如下图所示：
发展过程中产生了许多的性能指标、测量工具、优化手段等等，本文主要讲述关键性能指标及测量标准。
性能指标，顾名思义，就是性能优化过程中参考的一些标准。
进行性能优化，指标就是我们的一个抓手，首先你就要确定它的指标，然后才能根据指标去采取措施，否则就会像无头苍蝇一样乱撞，没有执行目标。
什么样的指标值得我们关注？
Web Vitals
Google在2020年推出了一个名为Web Vitals的新概念，着重评估一组页面访问体验钟的一部分关键指标，目的在于简化网络性能。每个指标代表页面体验的一个关键方面：加载、交互和视觉稳定性。
Web Vitals在感知的性能，交互性和令人愉悦的方面，可作为用户体验的简化基准。在考虑页面性能时，应该首先关注这一套较小的指标。
此外，Web Vitals代表了访问者在访问您的页面时首先在其视口中看到的内容，即首屏内容。他们首先看到的内容最终会影响他们对页面性能的看法。
首先，专注于这三个指标，可以使您获得可感知的和实际的性能可观的收益，然后再深入研究其他优化。
加载
所谓加载，就是进入页面时，页面内容的载入过程。比如，当你打开一些网站时，你会发现，有的网站首页上的文字、图片出现很缓慢，而有的则很快，这个内容出现的过程就是加载。加载缓慢严重消耗用户的耐心，会让用户离开页面。
这里我们拿淘宝首页的network信息观察一些指标：
如图所示，我们可以看到下方显示网页加载一共有201次请求（requests）、3.3MB资源量（resources），DOM完成的加载时间92ms（DOMContentLoaded）、总资源加载时间479ms（Load），这对一个电商网站来说已经很好了。
瀑布图
再来看瀑布图，nextwork中加载资源的列表右侧的Waterfall一栏显示的就是瀑布图，它可以非常直观的将网站的资源加载用自上而下的方式表达出来。我们可以从横向和纵向两个方向来解读它。
横向来看是具体资源的加载，如下图所示：
下面我们再来纵向看瀑布图，主要看2点：
- 资源之间的联系：如果下载发生了阻塞，很多资源的下载就会是串行处理的。如果是并行的，就可以加快下载过程。
- 关键时间节点：我们可以看到图中有红蓝两个颜色的两根线，蓝色的是DOM完成的加载时间，红色是页面中所有声明的资源加载完成的时间。
关键指标
那么这么多指标，到底哪些是最值得我们关注的呢？下面我来总结一下：
白屏时间（FP，First Paint）：也叫首次绘制时间，对于应用页面，首次出现视觉上不同于跳转之前内容的时间点，或者说是页面发生第一次绘制的时间点，它的标准时间是 300ms。如果白屏时间过长，用户会认为我们的页面不可用，或者可用性差。如果超过一定时间（如 1s），用户注意力就会转移到其他页面。
首屏时间（FCP，First Contentful Paint）：也叫首次有内容绘制时间，对于所有的网页应用，这是一个非常重要的指标。它是指从浏览器输入地址并回车后，到首屏内容渲染完毕的时间。这期间不需要滚动鼠标或者下拉页面，否则无效。也就是说，它是浏览器完成渲染DOM中第一部分内容（可能是文本、图像或其它任何元素）的时间点，此时用户应该在视觉上有直观的感受。
首次有意义绘制（FMP，First Meaningful Paint）：指页面关键元素的渲染时间。这个概念并没有标准化定义，因为关键元素可以由开发者自行定义究竟什么是“有意义”的内容，只有开发者或者产品经理自己了解。
速度指数（Speed Index）：指的是网页以多快的速度展示内容，标准时间是4s。
总下载时间（Load）：页面所有资源加载完成所需要的时间。一般可以统计 window.onload，得到同步加载的资源全部加载完的耗时。如果页面中存在较多异步渲染，那么可以将异步渲染全部完成的时间作为总下载时间。
TTFB（Time To First Byte）：是指网络请求被发起到从服务器接收到地一个字节的这段时间。其中包含了TCP连接时间、发送HTTP请求时间和获得相应消息第一个字节的时间。
TTFB这个参数比较重要，因为它可以给用户最直观的感受，如果TTFB很慢，说明资源一直没有返回，增加白屏时间，如果TTFB很快，资源回来之后就可以进行快速的解析和渲染。
那么影响TTFB的因素有哪些？
- 后台处理能力，服务器响应到底有多快
- 资源请求的网络状况，网络是否有延迟
首屏时间 vs 白屏时间
首屏时间 = 白屏时间 + 渲染时间。在加载性能指标方面，相比于白屏时间，首屏时间更重要。为什么？
从重要性角度看，打开页面后，第一眼看到的内容一般都非常关键，比如电商的头图、商品价格、购买按钮等。这些内容即便在最恶劣的网络环境下，我们也要确保用户能看得到。
从体验完整性角度看，进入页面后先是白屏，随着第一个字符加载，到首屏内容显示结束，我们才会认为加载完毕，用户可以使用了。白屏加载完成后，仅仅意味着页面内容开始加载，但我们还是没法完成诸如下单购买等实际操作，首屏时间结束后则可以。
DOMContentLoaded和Load事件的区别
其实从这两个事件的命名就能体会到，DOMContentLoaded 指的是文档中 DOM 加载内容加载完毕的时间，也就是说 HTML 结构已经是完整的了。但是我们知道，很多页面都包含图片、特殊字体、视频、音频等其他资源，由于这些资源由网络请求获取，需要额外的网络请求，因此DOM内容如加载完毕时，这些资源还没有请求或渲染完成。当页面上所有资源加载完成后，Load 事件才会被触发。
因此，在时间线上，Load 事件往往会落后于 DOMContentLoaded 事件。
交互/响应
所谓交互，就是用户点击网站或 App 的某个功能，页面给出的回应，也就是浏览器的响应时间。比如我们点击了一个“点赞”按钮，立刻给出了点赞数加一的展示，这就是交互体验好，反之如果很长时间都没回应，这就是交互体验不好。
关于交互指标，有的公司用 FID 指标 （First Input Delay，首次输入延迟）， 指标必须尽量小于 100ms，如果过长会给人页面卡顿的感觉。还有的公司使用 PSI（Perceptual Speed Index，视觉变化率），衡量标准是小于20%。
一般来说，主要包括以下几个指标：
交互动作的反馈时间：也叫用户可交互时间，就是用户可以与应用进行加护的时间，一般来讲，我们认为是 DOMReady 的时间，因为我们通常会在这时绑定事件操作。如果页面中设计交互的脚本没有下载完成，那么当然没有达到所谓的用户可交互时间。那么如何定义 DOMReady 时间呢？这里我推荐大家看司徒正美的文章《何谓DOMReady》。
刷新率（FPS，Frame Per Second）：也叫帧率，标准的刷新率指标是60帧/s，它可以决定画面是否足够流畅。
异步请求的完成时间：所有的异步请求能在1s中内请求回来。
关于帧率，我们可以用chorme Devtools来查看，打开控制台，点击快捷键command/ctrl+shift+P，弹出下面的弹窗，输入frame，点击FPS一栏，就会在页面左上角看到图2所示的监控台，显示网页交互过程中每一帧的绘制频率。
不同帧率的体验
- 帧率能够达到 50 ～ 60 FPS 的动画将会相当流畅，让人倍感舒适；
- 帧率在 30 ～ 50 FPS 之间的动画，因各人敏感程度不同，舒适度因人而异；
- 帧率在 30 FPS 以下的动画，让人感觉到明显的卡顿和不适感；
- 帧率波动很大的动画，亦会使人感觉到卡顿
现在网上很多关于浏览器reflow的文章都说给要少用offsetTop, offsetLeft 等获取布局信息的。因为这些属性需要触发一次浏览器的的Layout。也就是说在一帧内（16ms）会多了一次layout。如果Layout的次数太多，就会导致掉帧。
视觉稳定性
视觉稳定性指标CLS（Cumulative Layout Shift），也就是布局偏移量，它是指页面从一帧切换到另外一帧时，视线中不稳定元素的偏移情况。
比如，你想要购买的商品正在参加抢购活动，而且时间快要到了。在你正要点击页面链接购买的时候，原来的位置插入了一条 9.9 元包邮的商品广告。结果会怎样？你点成了那个广告商品。如果等你再返回购买的时候，你心仪商品的抢购活动结束了，你是不是很气？所以，CLS也非常重要。
一个好的CLS分数是75%以上的用户小于0.1，如图所示：
布局偏移的具体内容
布局偏移是由 Layout Instability API 定义的。这个API会在任意时间上报 layout-shift 的条目，当一个可见元素在两帧之间，改变了它的起始位置（默认的 writing mode 下指的是top和left属性）。这些元素被当成不稳定元素。
需要注意的是，布局偏移只发生在已经存在的元素改变起始位置的时候。如果一个新的元素被添加到dom上，或者已存在的元素改变它的尺寸，除非改变了其他元素的起始位置，否则都不算布局偏移。
布局偏移主要包含以下几项：
布局偏移分数：布局偏移的分数是两个度量的乘积：影响分数(impact fraction)和距离分数(distance fraction)。如果是一个很大的元素移动了较小的距离，实际影响并不大，所以分数需要依赖两个度量。
影响分数：影响分数测试的是两帧之间，不稳定元素在视图上的影响范围。
距离分数：距离分数测试的是两帧之间，不稳定元素在视图上移动的距离（水平和纵向取最大值）。如果有多个不稳定元素，也是取其中最大的一个。
动画和过渡：动画和过渡，如果做得好，对用户而言是一个不错的更新内容的方式，这样不会给用户“惊喜”。突然出现的或者预料之外的内容，会给用户一个很差的体验。但如果是一个动画或者过渡，用户可以很清楚的知道发生了什么，在状态变化的时候可以很好的引导用户。
CSS中的
transform属性可以让你在使用动画的时候不会产生布局偏移。- 用
transform:scale()来替换width和height属性 - 用
transform:translate()来替换top,left,bottom,right属性
CLS是平时开发很少关注的点，页面视觉稳定性对很多web开发而言，可能没有加载性能那么关注度高，但对用户而言，这确实是很困扰的一点。平时开发中，尽可能的提醒自己，不管是产品交互图出来之后，或者是UI的视觉稿出来之后，如果出现了布局偏移的情况，都可以提出这方面的意见。开发过程中也尽可能的遵循上面提到的一些优化点，给用户一个稳定的视觉体验。
RAIL测量模型
RAIL模型是2015年google提出的一个可以量化的测量标准，通过RAIL模型可以指导性能优化的目标，让良好的用户体验成为可能。
Response 响应：是指用户操作网页的时候浏览器给到用户的反馈时间，其中处理事件应在50ms以内完成。
为什么是50ms？谷歌向向用户发起调研，将用户的反馈分成了几个组，经过研究得出用户能接受的反馈时间是100ms。
那么为什么我们要设置在50ms以内，因为100ms是用户输入到反馈的时间，但是浏览器处理反馈也需要时间，所以留给开发者优化处理事件的时间在50ms以内。如下图所示：
Animation - 页面中动画特效的流畅度，达到每10ms产生一帧。
根据研究得出，动画要达到60sps，即每秒60帧给人眼的感觉是流畅的，每一帧大概在16ms，去除浏览器绘制动画的6ms，开发者要保证每10ms产生一帧。
在这16ms内浏览器要完成的工作有：
- 脚本执行（JavaScript）：脚本造成了需要重绘的改动，比如增删 DOM、请求动画等
- 样式计算（CSS Object Model）：级联地生成每个节点的生效样式。
- 布局（Layout）：计算布局，执行渲染算法
- 重绘（Paint）：各层分别进行绘制（比如 3D 动画）
- 合成（Composite）：将位图发送给合成线程。
Idle空闲 - 浏览器有足够的空闲时间，与响应想呼应。尽可能最大化空闲时间，不能让事件处理时间太长，超过50ms。
例如延迟加载可以用空闲时间去加载。但是如果需要前端做业务计算，就是不合理的。
Load - 网络加载时间，在5s内完成内容加载并可以交互。首先加载-解析-渲染的时间在5s，其次网络环境差的情况下，加载也会受到影响。
总结
至此，性能优化的指标我就介绍完了，现将关键指标总结如下：
- 性能优化的三个方向：加载、交互、视觉稳定性
- 加载的关键指标有：TTFB（请求等待时间）、FP（白屏时间）、FCP（首屏时间）、Speed Index(4s)
- 交互的关键指标：用户可交互时间、帧率（FPS）、异步请求完成时间
- 交互稳定性（CLS）：布局偏移量中，布局偏移分数 = 影响分数 x 距离分数
- RAIL测量模型关注点：响应时间50ms、动画10ms/帧、浏览器空闲时间<50ms、网络加载时间5s
链接：https://juejin.cn/post/6956583036133572639
