初入性能指标的大门，绕不过Google Chrome，再进一步了解细节之前，我们可以先关注 Google 带来的性能指标。

文档笔记

现在访问这个网站 https://web.dev/vitals/ 如果访问缓慢可以查看 官方GitHub https://github.com/GoogleChrome/web-vitals

Vitals 可以翻译为生命、命脉。直译的是web的命脉。可以理解为性能指标。

随着web发展，衡量web性能的指标也在发展，也正是因为Chrome的占有率逐步提高，到现在的遥遥领先，也在一定程度上巩固了Google在web中的话语权。

算啦，闲话不提，着重看看这个网站提到了什么。

三个核心指标

2020年着重三个指标：

也提到，为了体现实际情况，设置到75%的页面加载达标即可。

工具封装

这三个概念后面会继续展开，这里Google封装了一个库 web-vitals 和封装了一个Chrome插件 web-vitals-extension

前者是一个npm包，通过引入这个库可以很方便求得 刚才提到的 lcp fid cls，和其他的指标： FCP 和 TTFB

方便诊断 LCP

后者可以方便做统计

核心的概念后面再展开。

概念解析

以下概念来自以用户为中心的性能指标

我们提到web性能，其实是相对的，但可以量化：

• 一个站点在性能强、网速快的机器上运行良好，但在低端环境下表现不好
• 两个站点，使用同样的设备访问，一个看起来加载快，渐进加载
• 网站渲染快，但交互慢，交互卡顿

原始上，性能以 window.onload 事件来衡量，现在已经不够了。衡量性能通常需要两个环境：测试环境和用户环境。前者也就是实验室环境，我们保证变量统一，后者

用户加载时候的实际情况来衡量性能，实时监控，这叫 RUM Real_user_monitoring

如何衡量性能，有几个类型：

• 感知的加载速度：页面可以多快地加载并将其所有可视元素呈现到屏幕。
• 加载响应度：页面加载和执行任何必需的JavaScript代码的速度，以便组件快速响应用户交互
• 运行时响应性：页面加载后，页面对用户交互的响应速度有多快。
• 视觉稳定性：页面上的元素是否以用户不期望的方式移动，并可能干扰他们的交互？
• 平滑度：过渡和动画是否以一致的帧速率渲染并从一种状态流畅地流动到另一种状态？

因此，下面展开几个重要指标：

1. FCP first contentful paint
2. LCP largest contentful paint 最大内容绘制
3. FID 首次输入延迟
4. 交互时间 TTI
5. 总阻塞时间 TBT
6. 累积布局便宜 CLS

除了这些指标，有时候还有更细致的指标：

• 用户计时 user timing
• 长任务 long tasks
• 元素计时 element timing
• 导航计时 navigation timing
• 资源计时 resource timing
• 服务器计时 server timing

https://docs.google.com/document/d/1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view