Chrome Performance面板可诊断网页卡顿等问题，步骤包括：一、隐身窗口启动并配置录制；二、执行覆盖典型交互的4–6秒录制；三、通过FPS、CPU、火焰图识别瓶颈；四、用Call Tree按Self Time定位问题函数；五、控制变量对比优化前后指标。

如果您需要诊断网页卡顿、动画不流畅或加载缓慢等问题，Chrome Performance面板可记录并可视化主线程活动、渲染帧率与资源耗时。以下是开展性能分析的具体步骤：

一、启动Performance录制环境

为排除插件与缓存干扰，确保分析结果反映页面真实行为，需在受控环境下启动录制。

1、点击Chrome右上角三个点图标，选择“新建隐身窗口”。

2、在隐身窗口中打开目标网页。

3、按下 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（Mac） 打开开发者工具。

4、切换至 Performance 选项卡。

5、点击右上角齿轮图标，进入设置，勾选 Screenshots 并启用 Advanced instrumentation。

6、在CPU节流下拉菜单中选择 4x slowdown，以模拟中低端移动设备运行条件。

二、执行性能录制与捕获

录制过程需覆盖典型用户交互路径，确保关键性能阶段被完整捕获，如页面加载、滚动、按钮点击或动画触发。

1、确认Network面板中已勾选 Disable cache（若需分析首屏加载）。

2、点击Performance面板顶部的 Record（●） 按钮。

3、立即执行待测操作：例如刷新页面、滚动到底部、点击“加载更多”或触发动画。

4、持续录制 4–6秒，确保覆盖完整交互周期。

5、点击 Stop（■） 按钮结束录制，DevTools自动处理并渲染性能报告。

三、识别关键性能问题区域

报告生成后，时间轴顶部的概览区直观暴露瓶颈所在，重点关注红色标记与异常波动。

1、观察 FPS轨道：出现 红色竖条 表示该帧耗时超过16.7ms，发生掉帧。

2、查看 CPU轨道：若紫色（Rendering）或黄色（Scripting）区域持续高位堆积，说明渲染或JS执行过载。

3、定位 Main线程火焰图 中宽度显著大于16.7ms的长任务条，其对应函数即潜在瓶颈源。

4、检查 Frames轨道 下方缩略图，对比卡顿时的截图与流畅帧，确认视觉异常是否同步发生。

四、深入分析主线程调用栈

火焰图呈现主线程任务的嵌套关系与时序，是定位具体代码位置的核心视图。

1、在火焰图中拖动鼠标框选一段高耗时区域（如连续多个宽条）。

2、松开鼠标，时间轴自动缩放至所选范围。

3、点击火焰图下方的 Bottom-Up 或 Call Tree 标签页。

4、在 Call Tree 中按 Self Time 降序排列，找出 Self Time占比最高 的函数。

5、展开该函数节点，逐级下钻至最底层原生方法或业务代码行号，确认具体执行位置。

五、验证优化效果的对比录制

实施代码修改后，必须通过控制变量方式复现相同操作路径，以量化改进幅度。

1、保持相同设备、网络与CPU节流设置不变。

2、使用同一隐身窗口，刷新页面并执行与前次完全一致的操作序列与时长。

3、再次录制并停止，此时Performance面板将自动保存第二份报告。

4、点击报告顶部的下拉菜单，切换查看两份报告。

5、分别观察两份报告中 FPS最低值、长任务数量、Rendering总耗时 等关键指标变化。