常用Web性能指标
1、FCP（First Contental Paint，首次绘制时间）
定义：浏览器从加载开始到首次渲染DOM元素的时间。
优化：
- 预加载，`<link rel="preload" href=" " >`
- 内联css，`<style></style>`
- 减少css和js文件体积，js异步加载`<script async>``<script defer>`
- 代码拆分，按需加载js模块
- 使用HTTP2/3，CDN加快静态资源分发
2、LCP（Largest Contental Paint，最大内容绘制时间）
定义：浏览器从加载开始到渲染最大DOM元素的时间。
优化：
- 优化图片、视频的大小，压缩、webp格式
- 缓存
- 服务端渲染SSR
- 懒加载
3、INP（交互到下次绘制的时间）
定义：用户交互后到页面响应更新的时间。
优化：
- 减少主线程阻塞，用web worker子线程处理大量计算
- 优化事件处理，使用
requestAnimationFrame（能够保证回调函数在屏幕刷新之前执行）或requestIdleCallback调度任务 - 避免频繁触发重排（Reflow）和重绘（Repaint）
- 使用代码分割和Tree Shaking减少js代码体积
4、FID（首次交互的延迟）
用户首次交互到浏览器响应的延迟。
5、DLS（累计布局偏移）
定义：出现的所有意外布局的偏移的和。
优化：
- 设置宽高
- 避免动态加入内容
6、TTI（可交互时间）
定义：页面加载开始到完全可交互的时间。（主线程空闲且事件可响应）
优化：
7、DCL（DOM内容加载完成时间）
表示 HTML 文档完全加载和解析完成的时间。
- HTML文件大小
- 优化JS加载，如异步加载JS和内联JS，减少HTTP请求
- 优化CSS、网络
常用工具：
chrome浏览器的lighthouse、performance