前端性能监控

前端性能指标

Performance 面板是 Chrome DevTools 中的一个功能模块，它能够记录并展示页面在加载和运行过程中的各项性能指标，包括：

页面加载时间
资源加载顺序
JavaScript 执行耗时
渲染帧率（FPS）
强制同步布局（强制重排）
长任务（Long Tasks）
内存占用情况

✅ 打开方式：

右键点击页面 → “检查”（或快捷键 F12 / Ctrl+Shift+I）；
切换到顶部菜单栏的 “Performance” 标签页；
点击左上角的 录制按钮（圆形图标） 开始记录；
操作页面后再次点击停止录制，即可查看性能报告。

如何利用 Performance 分析性能问题？

1. 录制一次完整的页面加载过程

点击开始录制按钮（红色圆点）；
刷新页面或进行相关交互；
操作完成后再次点击停止录制；
查看生成的性能面板报告。

2. 分析 Summary 总览

查看各阶段耗时占比，重点关注以下几点：

📌 如果 Scripting 占比过高，说明可能存在 JavaScript 执行效率问题；
📌 如果 Rendering 或 Painting 耗时较多，可能是样式复杂或频繁重绘重排导致。

3. 查看 Flame Chart（火焰图）

火焰图可以清晰地看到主线程上的任务执行顺序和耗时：

横向宽度表示任务持续时间；
纵向深度表示函数调用栈；
颜色区分不同类型的任务（如黄色为 JS 函数，紫色为渲染等）；
注意是否有超过 50ms 的长任务（Long Task），这会影响用户交互体验。

📌 鼠标悬停在某个任务上可以看到详细信息，包括函数名、耗时、调用堆栈等。

4. 定位具体问题函数

切换到 Bottom-Up 视图，按耗时排序，找到耗时最多的函数：

查看其 Self Time（自身执行时间） 和 Total Time（包含子函数的总时间）；
点击函数名可跳转到对应的火焰图位置；
结合代码进行优化（如减少循环次数、防抖节流、拆分任务等）。

5. 常见性能问题及优化建议

1. 页面性能检测工具:

1. Lighthouse
2. web-vitals: https//www.npmjs.com

前端性能指标的标准