3、性能分析工具入门：Chrome DevTools Performance面板初探，录制与分析基础
说实话，很多前端同学排查卡顿，第一反应就是「凭感觉」。哪里卡了？不知道。为什么卡？更不知道。然后就开始瞎改代码，改完发现更卡了。
我刚开始带项目的时候也犯过这个错。有一次线上反馈页面滚动掉帧，我凭经验猜是某个动画库的问题，折腾了两天，结果一录 Performance 面板，发现罪魁祸首是第三方 SDK 的定时器。嗯，从那以后，我再也不敢「盲猜」了。
这一章，我们就来搞定 Chrome DevTools 里最核心的工具——Performance 面板。你不需要记住所有指标，但得知道怎么录、怎么看、怎么定位问题。
3.1 打开 Performance 面板的两种方式
先说说怎么打开它。我个人习惯用快捷键，因为快。
- 方式一：快捷键 ——
Ctrl+Shift+I（Mac 是Cmd+Option+I）打开 DevTools，然后Ctrl+Shift+P调出命令菜单，输入performance回车。 - 方式二：手动点 —— DevTools 顶部标签栏，找到「Performance」标签。如果没看到，点那个
>>展开更多。
Ctrl+Shift+D 切换成独立窗口。这样录制时不会遮挡页面内容。
3.2 录制一次性能数据
面板打开后，你会看到一个圆形的录制按钮。别急着点，先做两件事：
- 清空缓存 —— 勾选「Disable cache」（模拟首次加载）。
- 设置 CPU 降速 —— 在「CPU」下拉选「4x slowdown」或「6x slowdown」。为什么？因为你的开发机太强了，卡顿在真机上才会暴露。
然后点击录制按钮（或按 Ctrl+E），开始操作页面。比如滚动、点击、切换路由。操作完再点一次停止。
3.3 读懂 Performance 面板的主界面
录制完成后，你会看到一堆花花绿绿的条条框框。别慌，我们拆开看。
整个面板从上到下分三个区域：
| 区域 | 名称 | 作用 |
|---|---|---|
| 顶部 | 概览区（Overview） | 显示 CPU、网络、帧率的变化趋势 |
| 中部 | 火焰图区（Flame Chart） | 每个函数的调用栈和执行时长 |
| 底部 | 详情区（Details） | 选中某个任务后，显示具体信息 |
你想想看，这三个区域其实对应了三个问题：什么时候卡？谁在干活？干了多久？
3.4 关键指标：FPS、CPU、Net
概览区里有三条最重要的曲线：
- FPS（帧率） —— 绿色条越高越好。如果出现红色条，说明那一帧掉到 30fps 以下了，用户会明显感觉到卡顿。
- CPU —— 颜色越深，CPU 越忙。如果长时间保持深色，说明主线程被占满了。
- Net —— 网络请求的耗时。如果卡顿伴随大量请求，可能是资源加载阻塞了渲染。
核心判断标准：
- 绿色 FPS 条持续满格 → 流畅
- 出现红色 FPS 条 → 卡顿点
- CPU 长时间深色 → 主线程过载
3.5 火焰图怎么看？
火焰图是 Performance 面板的灵魂。说白了，它就是一张「函数调用时间线」。每个横条代表一个函数调用，横条越宽，执行时间越长。
怎么看？记住三个原则：
- 从上往下看 —— 上层是调用者，下层是被调用者。
- 找宽条 —— 哪个横条最宽，哪个函数就是「耗时大户」。
- 看颜色 —— 蓝色是 HTML 解析，紫色是样式计算，黄色是 JavaScript 执行，绿色是渲染。
举个例子。有一次我排查一个列表页的卡顿，火焰图里有个黄色横条特别宽，点进去一看，是 Array.sort 在排序 5000 条数据。嗯，找到根因了。
3.6 实战：录制并定位一次卡顿
我们来走一遍完整流程。假设你怀疑页面滚动卡顿：
- 打开 Performance 面板，设置 CPU 4x 降速。
- 点击录制，然后快速滚动页面 3-5 秒。
- 停止录制，看概览区的 FPS 曲线。
- 找到红色 FPS 条对应的区域，用鼠标框选它。
- 在火焰图里找那个时间段内最宽的横条。
- 点击横条，底部详情区会显示函数名、耗时、调用栈。
3.7 知识体系总览
下面这张图，是我自己总结的 Performance 面板分析流程。你可以把它当成一张「地图」，每次排查卡顿就按这个路径走。
3.8 常见误区
最后说几个我见过很多新人会踩的坑：
- 误区一：不降速直接录。 开发机上跑得飞起，真机上卡成 PPT。降速是必须的。
- 误区二：只看概览不看火焰图。 知道卡了，但不知道谁在卡，等于白录。
- 误区三：框选范围太大。 框了 3 秒，火焰图里几百个函数，根本找不到重点。框得越准，定位越快。
好了，这一章的内容就到这里。Performance 面板是排查卡顿的「眼睛」，你花半小时练几次，后面排查效率能翻倍。