Memory 面板

适用于内存泄露排查

Heap snapshot 堆快照 对比找出未释放的对象

Allocation Timeline 分配时间线 展示对象分配和释放时间

Allocation Sampler 分析内存占用的函数来源

常见的内存泄露来源

• 事件监听未释放
• dom引用未释放
• 定时器未清除
• 闭包未释放
• 全局变量的累积

Performance monitor 面板

面板结构总览

详解

FPS (Frames Per Second)

每秒的帧数，衡量页面的流畅度。

理想值为 60fps，即每秒钟渲染 60 次。 每帧大概是16.6ms

如果 FPS 低于 30FPS，页面就会卡顿，用户体验会下降。

如果出现红色条，那就说明帧率出现严重下降

CPU (主线程任务)

不同的颜色代表不同的任务

• 蓝色：JavaScript 执行时间 (Scripting)
• 黄色：布局和绘制时间 (Layout)
• 绿色：HTML 解析/ DOM 构建
• 橙色：绘制(Painting)