-
浏览器性能接口
-
Performance：developer.mozilla.org/zh-CN/docs/…
-
页面性能数据：
- performance.timing: developer.mozilla.org/zh-CN/docs/…
- performance.navigation: developer.mozilla.org/zh-CN/docs/…
- TTFB（Time to First Byte，首包时间） <500ms
计算方式：performance.timing.responseStart - performance.timing.navigationStart
- FP（First Paint , 白屏时间） <1S
- 中文释义：网页的第一个像素渲染到屏幕上所用的时间，可以理解为白屏时间。
计算方式：performance.getEntriesByName("first-paint")[0].startTime
- FCP (First Contentful Paint) ****<1.8S
-
中文释义：浏览器首次渲染任何文本、图像（包括背景图像）、非白色画布或 SVG 的时间。这不包括 iframe 的任何内容，但包括带有待处理 webfonts 的文本。这是用户第一次可以开始消费页面内容。
-
计算方式：performance.getEntriesByName("first-contentful-paint")[0].startTime
LCP (LargestContentfulPaint) ****<2.5S
中文释义：可视区域内可见的最大图像或文本块完成渲染的相对时间。
DCL（DOMContentLoaded , 文档加载完成时间,首次可交互时间）
- 中文释义：当HTML 文档完全加载和解析的时间，无需等待样式表、图像和子框架完成加载。
计算方式：performance.timing.domContentLoadedEventEnd- performance.timing.navigationStart
L（Load 页面加载完成时间）
- 中文释义：整个页面加载完成的时间，包括所有相关资源，例如样式表和图像。
计算方式：performance.timing.loadEventEnd- performance.timing.navigationStart
FID (First Input Delay) 首次输入延迟 ****<100ms
- 中文释义：从用户第一次与页面交互（例如当他们单击链接、点按按钮或使用由 JavaScript 驱动的自定义控件）直到浏览器对交互作出响应，并实际能够开始处理事件处理程序所经过的时间。
计算方式：performance.getEntriesByType('first-input')[0].processingStart - performance.getEntriesByType('first-input')[0].startTime;
CLS（Cumulative Layout Shift）累积布局偏移 <0.1
- 中文释义：测量整个页面生命周期内发生的所有意外布局偏移中最大的布局偏移分数, 每当一个可见元素的位置从一个已渲染帧变更到下一个已渲染帧时，就发生了布局偏移 。浏览器在计算布局偏移分数时，会查看可视区域大小和两个已渲染帧之间的可视区域中不稳定元素的位移。布局偏移分数是该位移的两个度量的乘积：影响分数和距离分数（两者定义如下）。
