页面优化
相关指标
用户体验指标
- FP（First Paint）：首次绘制时间，即浏览器首次将像素绘制到屏幕的时间。即白屏结束时间。
- FCP（First Contentful Paint）：首次内容绘制时间，即浏览器首次绘制 DOM 元素的时间。
- FMP（First Meaningful Paint）：首次有意义的绘制时间，即首次有意义的内容绘制到屏幕的时间。Lighthouse 6.0 已弃用，优先使用 LCP。
- LCP（Largest Contentful Paint）：最大内容绘制时间，即页面中最大的元素绘制到屏幕的时间。即首屏结束时间。
- TTI（Time To Interactive）：首次可交互时间，即页面变得可交互的时间。从 FCP 开始计算。
- FID（First Input Delay）：首次输入延迟，即用户首次与页面交互到页面响应的时间。记录 FCP 到 TTI 的时间。
性能指标
- TTFB（Time To First Byte）：从发起请求到接收到第一个字节的时间。
- TBT（Total Blocking Time）：总阻塞时间，即页面上所有长任务的总和。
- CLS（Cumulative Layout Shift）：累计布局位移，即页面上所有元素的布局位移的总和，得分越小越稳定，应努力<0.1。
页面加载指标
- DomLoading：开始解析 HTML 文档的时间。即 document.readyState 变为 loading 的时间，相应的 document.readystatechange 事件触发的时间。
- DomInteractive：DOM 可交互时间，即 DOM 解析完成的时间，但是诸如图像、样式表和框架之类的子资源还在加载。即 document.readyState 变为 interactive 的时间，相应的 document.readystatechange 事件触发的时间。此时 defer 的 js 还未执行，没有 defer 时等同于 DOMContentLoaded。
- DOMContentLoaded：DOM 加载完成时间，即 DOM 树构建完成的时间。即
document.DOMContentLoaded事件触发的时间。此时 defer 的 js 已执行完毕。但是图片等资源还未加载完成。 - DomComplete：DOM 完成时间，即 DOM 加载完成且所有资源（如图片、样式表等）也加载完成的时间。即 document.readyState 变为 complete 的时间，相应的 document.readystatechange 事件触发的时间。
- Load：页面完全加载时间，即页面上所有资源加载完成的时间。即
window.onload事件触发的时间，同样也是 document.readyState 变为 complete 的时间。
相关 API
Performance
PerformanceNavigationTiming。替代 Performance.timing。兼容性还不太行。