PY性能指标
指标分为三类：文档加载相关、内容呈现相关、交互响应性相关，并基于这些指标提取出与用户最相关的核心指标。
文档加载相关
文档加载过程时间线如图，这里主要介绍三个指标：TTFB、DCL 和 Load 时间。
Time to first Byte
浏览器从请求页面开始到接收第一字节的时间，这个时间段内包括 DNS 查找、TCP 连接和 SSL 连接。
DocumentContentLoad
DomContentLoaded 事件触发的时间。当 HTML 文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架加载完成。
onLoad
onLoad 事件触发的时间。页面所有资源都加载完毕后（比如图片，CSS），onLoad 事件才被触发。
两者具体细节：
内容呈现相关
First Paint
从开始加载到浏览器首次绘制像素到屏幕上的时间，也就是页面在屏幕上首次发生视觉变化的时间。但此变化可能是简单的背景色更新或不引人注意的内容，它并不表示页面内容完整性，可能会报告没有任何可见的内容被绘制的时间。
First Contentful Paint（FCP）
- 定义
浏览器首次绘制来自 DOM 的内容的时间，内容必须是文本、图片（包含背景图）、非白色的 canvas 或 SVG，也包括带有正在加载中的 Web 字体的文本。
Largest Contentful Paint（LCP）
可视区域中最大的内容元素呈现到屏幕上的时间，用以估算页面的主要内容对用户可见时间。
First Screen Paint
页面从开始加载到首屏内容全部绘制完成的时间，用户可以看到首屏的全部内容。
如果说 LCP 是用户看到有效内容的最近似的时间，那么在 FSP 这个时间点用户已经看到了可视区域内完整的内容，可以说是衡量用户视觉体验最合适的指标。
Speed Index
这是一个表示页面可视区域中内容的填充速度的指标，可以通过计算页面可见区域内容显示的平均时间来衡量。
交互响应性相关
Time to Interactive
表示网页第一次 完全达到可交互状态 的时间点，浏览器已经可以持续性的响应用户的输入。完全达到可交互状态的时间点是在最后一个长任务（Long Task）完成的时间, 并且在随后的 5 秒内网络和主线程是空闲的。
从定义上来看，中文名称叫可持续交互时间或可流畅交互时间更合适。
First CPU Idle（FCI）
页面第一次可以响应用户输入的时间。
FCI 和 TTI 都是页面可以响应用户输入的时间。FCI 发生在用户可以开始与页面交互时；TTI 发生在 用户完全能够（可持续） 与页面交互时。
First Input Delay（FID）
从用户第一次与页面交互（例如单击链接、点击按钮等）到浏览器实际能够响应该交互的时间。
Frames Per Second（FPS）
帧率是视频设备产生图像（或帧）的速率，用每秒可以重新绘制的帧数（Frames Per Second，FPS）表示。
重新绘制可能需要重新计算样式、布局和绘制，如果每帧绘制到屏幕的时间在 16.7 ms 以上，每秒绘制的帧数就会小于 60 帧，人眼就能感受到页面出现卡顿，所以 FPS 是衡量应用流畅度的一个非常重要的指标，60fps 是页面流畅的目标，可以为每次绘制提供 16.7ms 的时间预算。
- 哪些情况下会触发重新绘制？
FPS 在电影和游戏中最为常见，但现在被广泛用作衡量网站和网络应用程序性能的指标。
在 Web 性能中，FPS 最常用于衡量动画的性能：如果 FPS 太低，动画会卡顿。
FPS 也可以作为用户与页面交互时页面响应性的一般度量。例如，如果将鼠标移到某个页面元素上会触发执行 JavaScript 来更新页面，这可能会触发回流和重绘，这需要在帧中完成，如果浏览器处理帧的时间过长，将会出现卡顿现象。
再例如，如果在滚动页面时会触发很多复杂的页面更新，并且浏览器无法保持可接受的帧率，那么滚动页面时会显得迟缓或卡顿。
- 如何降低重新绘制的时间？
重新绘制到屏幕可能需要从构建 DOM 树开始、重新计算样式、布局、绘制等，我们需要尽可能的避免触发这些流程，例如使用 CSS 修改 opacity 属性就不会触发重新布局，可以减少绘制时间。
所以在实现动画时，建议使用性能成本低的 CSS 属性，而不要使用 JavaScript 设置元素