Angular应用Chrome DevTools性能监控：灰色区域及图表解读疑问

1. 灰色区域的含义 #

灰色部分就是总CPU使用率，对应你看到的左侧81%的数值。它包含了浏览器所有进程（渲染、GPU、插件等）以及系统其他进程的CPU消耗，不只是当前Angular页面的任务占用。

2. 白、黄、粉三色图表解读 #

这三色是当前页面进程内的CPU消耗细分：

• 白色：浏览器处于空闲状态，无页面相关任务执行
• 黄色：JavaScript代码执行（涵盖Angular的变更检测、组件渲染逻辑、用户交互脚本等）
• 粉色：样式计算与布局（Recalculate Style + Layout），即页面元素的样式更新和重排操作

3. CPU使用率与堆内存数值解读 #

• CPU使用率：左侧显示的是系统总CPU占用（对应灰色区域），黄、粉色块仅代表当前页面进程内的消耗占比。你看到黄色远低于81%，是因为灰色包含了系统其他进程、浏览器其他进程的消耗，当前页面的JS执行只是其中一部分。
• 堆内存：图表展示当前页面JS堆的内存使用变化，左侧数值为实时内存占用量。若内存持续上涨无回落，需排查Angular组件订阅未取消、全局变量未释放等内存泄漏问题；若有周期性回落，说明垃圾回收（GC）在正常工作。

内容的提问来源于stack exchange，提问作者Angad