Chrome Performance 页面性能分析指南
2022-09-09 17:47:17
Chrome DevTools中的Performance工具是前端开发者进行性能分析的重要利器。它提供了丰富的运行时数据，帮助开发者深入了解页面加载和交互过程中的性能瓶颈。以下是使用Performance工具进行性能分析的详细指南。
一、Performance工具介绍打开Performance工具
在新的无痕窗口打开网页，打开Chrome DevTools（通常通过按F12或右键点击页面选择“检查”来打开）。
切换到“Performance”面板。
按钮功能：
黑色按钮：记录交互阶段的性能数据。
圆形箭头按钮：记录加载阶段的性能数据。
设置区域：可以设置当前页面的网络加载速度与CPU运算速度。
生成性能报告
点击黑色按钮开始记录性能数据，进行页面交互后，再次点击停止记录，生成性能报告。
- 整体界面渲染时间线：展示每个时间段执行的事件顺序，精确到毫秒。
- 关键指标图表：包括页面帧速（FPS）、CPU资源消耗、网络请求流量、V8内存使用量（堆内存）等。
Network
直观显示资源加载的顺序与时长。
Interactions
记录用户交互操作，如点击、输入、动画等。
Timings
记录关键时间节点，如FP（First Paint）、FCP（First Contentful Paint）、LCP（Largest Contentful Paint）等。
Main
渲染进程中主线程的执行记录，是性能分析的重点。
可查看某个任务执行的具体情况。
Compositor
合成线程的执行记录，记录HTML绘制阶段（Paint）结束后的图层合成操作。
Raster
光栅化线程池，让GPU执行光栅化的任务。
GPU
GPU进程主线程的执行过程记录，可直观看到何时启动GPU加速。
Memory
显示内存使用情况，如JS Heap（堆）。
如果曲线持续增长，可能存在内存泄露。
- 统计信息：
Loading：加载时间。
Scripting：JS计算时间。
Rendering：渲染时间。
Painting：绘制时间。
Other：其他时间。
Idle：浏览器闲置时间。
网络&白屏
查看白屏时间和网络加载情况。
分析资源加载顺序、时长及是否存在空白期。
火焰图
在Main面板中查看函数耗时。
选中标红的Task放大，查看具体耗时点。
点击函数查看代码信息，定位耗时函数。
时间线&内存情况
查看关键时间节点，如FCP、LCP、FMP、DCL、L等。
分析内存使用情况，如JS Heap增长情况、Nodes和Listeners增加情况等。
根据Scripting、Rendering等时间判断性能瓶颈。
通过Chrome DevTools的Performance工具，开发者可以直观地了解浏览器的渲染原理与工作流程，深入分析页面加载和交互过程中的性能瓶颈。结合网络加载、白屏时间、火焰图、时间线和内存情况等多维度分析，开发者可以精准定位问题，并针对性地进行优化。建议开发者多尝试使用Performance工具，加深对前端性能优化的理解与实践。
热门标签
