性能指标有非常多，也可以自定义。以下列出一些常用的性能指标。
FCP 首次内容绘制
- 定义：首次内容绘制 (FCP) 指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间
- 白话
-
- 约等于白屏时间
LCP 最大内容绘制
-
- 最大元素完成渲染的时间点。通常来说页面中最大元素能快速渲染会让用户感觉页面性能还不错
- 该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改变
- 另外，可能最大区块元素并不是你的页面上最重要的元素, 可以使用自定义指标测量
CLS 累积布局偏移
- 定义：CLS 测量整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数
- 白话
-
- 代表页面布局的稳定性
- 在手机上这个指标更为重要。因为手机屏幕较小，CLS 值大的话会让用户觉得页面体验做的很差
FID 首次输入延迟
- 定义：FID 测量从用户第一次与页面交互（例如当他们单击链接、点按按钮或使用由 JavaScript 驱动的自定义控件）直到浏览器对交互作出响应，并实际能够开始处理事件处理程序所经过的时间。
- 白话
-
- 即是说用户与页面交互时（如点击链接或按钮），页面可以在多长时间内作出反馈
- 还有一个性能指标 TTI（Time to Interactive）它反映的是用户什么时候可以开始和页面进行交互，但如果用户在 TTI 的时间内，没有与页面产生交互，TTI 是影响不到用户的；而如果想要知道 TTI 对用户的影响，需要 FID 这个指标，不同用户与网页发送交互的时间是不同的，所以对应的 FID 也不同
TTI 可交互时间
- 定义：TTI 指标测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间
- 白话
-
- 开发者为了追求更快的渲染速度而对页面进行了优化，但有时，这会以牺牲 TTI 为代价。可能会导致页面看似具备交互性（即，链接和按钮在屏幕上可见），但实际上并不能进行交互，因为主线程被阻塞或是因为控制这些元素的 JavaScript 代码尚未完成加载。这会导致体验很差，所以TTI代表页面实际“可用”的时间，即可交互时间
TBT 总阻塞时间
- 定义：总阻塞时间 (TBT) 指标测量First Contentful Paint 首次内容绘制 (FCP)与Time to Interactive 可交互时间 (TTI)之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应。
- 白话
-
- 这个指标和TTI可以说是配套使用的。白屏时间很快，但是页面无法交互的时间越长，就会导致TTI指标越差
- 每当出现长任务（在主线程上运行超过 50 毫秒的任务）时，主线程都被视作"阻塞状态"。因此，如果用户在某个长任务运行期间与页面进行交互，那么浏览器必须等到任务完成后才能作出响应。如果任务时长足够长（例如超过 50 毫秒），那么用户很可能会注意到延迟，并认为页面缓慢或卡顿
测量工具
性能指标的测量可以分为本地环境和生产环境。
生产环境测量是用户真实体验监控，一般会与前端监控平台集成在一起，比如sentry。
本地环境的测量主要借助chrome 调试工具中的灯塔和performance面板。
Performance
建议在无痕模式下使用该工具
Lighthouse
生成性能评分并且会给出一些优化建议
Chrome 任务管理器
可以使用任务管理器查看当前所有进程关于GPU、网络、和内存的使用情况
Coverage 面板
Coverage面板可以用来监控并统计出网站应用运行过程中代码执行的覆盖率情况。该面板统计的对象时JavaScript脚本文件与CSS样式表文件。统计结果主要包括：每个文件的字节大小、执行过程中已覆盖的代码字节数，以及可视化的覆盖率条形图。代码覆盖率低就意味着该代码文件存在着较多没有用到的代码，开发者可以根据这个结果对代码进行拆分，在需要的时候在进行加载。
Memory 面板
Memory面板可以快速生成当前文件的堆内存快照，或者查看内存随时间的变化情况，据此可以查看并发现可能出现的内存泄漏等情况。
web-vitals
npm包 可用于生产环境测量
优化相关
优化不在本篇中详细讲解，可以参考下面的文章
性能优化分为两个大的分类：
- 加载时优化
- 运行时优化
