什么是前端性能监控量化？
前端性能监控量化 是指使用可量化的指标（如页面加载时间、交互响应速度、资源大小等）来评估网页或应用的性能，并通过监测这些指标的数据趋势，找出可能的性能瓶颈。
常见的性能优化需要关注以下几方面：
- 页面加载性能（首屏渲染时间、白屏时间、资源加载速度、页面卡顿时间）
- 交互响应性能（用户操作的延迟、动画流畅度、页面停留时间）
- 代码执行性能（JavaScript 运行速度、计算密集型任务优化）
- 网络请求优化（HTTP 请求数、请求大小、CDN 加速）
- 错误和异常监控（JS 报错、网络请求失败）
前端性能监控的核心指标
前端性能监控指标可以分为 页面加载性能指标 和 交互体验性能指标。
页面加载性能指标
| 指标 | 说明 | 重要性 |
|---|---|---|
| TTFB（Time to First Byte） | 从用户发起请求到服务器返回第一字节的时间 | *** |
| FCP（First Contentful Paint） | 页面首次渲染内容出现的时间 | ** |
| LCP（Largest Contentful Paint） | 加载最大可视内容（如大图片或大段文本）的时间 | *** |
| TTI（Time to Interactive） | 页面可以交互的时间 | *** |
| DOMContentLoaded（DCL） | DOM 解析完成的时间 | * |
| Load Time | 页面所有资源加载完成的时间 | * |
所有的指标数据都可以通过浏览器提供的API拿到，并算出我们需要的数据，比如首页加载事件，白屏事件（FCP第一个元素渲染时间）
交互体验性能指标
| 指标 | 说明 | 重要性 |
|---|---|---|
| FID（First Input Delay） | 用户首次交互（点击、输入等）与浏览器响应之间的延迟 | *** |
| CLS（Cumulative Layout Shift） | 页面布局的视觉稳定性 | ** |
| FPS（Frames Per Second） | 页面帧率，影响动画流畅度 | ** |
| TBT（Total Blocking Time） | JavaScript 阻塞主线程的时间 | *** |
如何进行前端性能监测
使用 Chrome DevTools
Chrome DevTools 提供了一整套分析工具
- Network 面板：查看网络请求、资源加载情况。
- Performance 面板：分析 CPU、JavaScript 执行、帧率等。
- Coverage 面板：检测未使用的 CSS 和 JavaScript 代码。
示例：使用 Performance 进行分析
- 打开 DevTools（F12 或 Cmd + Option + I）。
- 选择 Performance 选项卡。
- 点击 Start Profiling and Reload Page 进行录制。
- 查看 CPU、网络请求、渲染时间等数据。
使用 Performance API
Performance API 允许我们在 JavaScript 代码中监控关键性能数据，这也是前端监控SDK必备的一个浏览器API,我们通过它可以直接拿到指标数据，并进行自定义的上报与修改 获取页面加载时间
window.addEventListener('load', () => {
const { loadEventEnd, navigationStart } = performance.timing;
console.log('页面加载时间:', loadEventEnd - navigationStart, 'ms');
});
