大家好，我是 前端架构师 - 大卫。
更多优质内容请关注微信公众号 @前端大卫。
初心为助前端人🚀，进阶路上共星辰✨，
您的点赞👍与关注❤️，是我笔耕不辍的灯💡。
背景
Chrome 浏览器的 Performance 选项卡是前端开发者较少使用的工具，但在项目遇到性能瓶颈时，它却是一个强大的分析工具，能够帮助快速定位问题。
示例
首先，访问以下网站：
googlechrome.github.io/devtools-sa...
如果无法访问（没有 VPN），可以下载代码库的本地拷贝：
页面上有多个上下滚动的小球，并提供了一些交互按钮：
- Add 10：增加 10 个小球。
- Subtract 10：减少 10 个小球。
- Stop：停止所有小球的滚动。
- Optimize：优化页面性能，使小球滚动更加流畅。
当多次点击 Add 10 按钮后，小球数量增加，页面会出现卡顿现象。但点击 Optimize 按钮后，滚动会变得流畅。
接下来，我们利用 Performance 选项卡分析卡顿的原因。
性能分析
1. Performance 录制功能
打开 Chrome 开发者工具，切换到 Performance 选项卡，点击 Record 按钮，录制约 5 秒后，系统会生成 性能分析报告。
下图展示了录制后的 性能分析报告：
接下来，我们将解析各个区域的作用，并找出性能瓶颈所在。
2. 红色条（性能问题指示）
分析报告中的 红色条 表示该部分渲染帧率低于标准 60 FPS，说明存在性能问题。
3. CPU 占用情况
下图展示了 CPU 负载，不同颜色的波浪代表 CPU 不同的占用部分，高度表示占用百分比。
Main 横条表示主线程运行情况，点击后可查看环形图，其中：
- 黄色区域：JavaScript 代码执行。
- 紫色区域：Rendering 渲染。
可以看到紫色区域较大，说明渲染耗时较长。
4. 帧率（Frames）
拖动时间线可看到 🔍放大镜按钮，点击后可缩短时间范围，精确查看每一帧的渲染情况。
点击 放大镜按钮 后，下图显示了在这段时间线内（205.83ms）发生的所有事件。
在 Frames 横条中：
- 绿色 表示正常帧率。
- 黄色 表示帧未能完全渲染，属于 部分渲染帧（Partially-presented frame）。
标准帧率为 16.7ms，如果某些帧耗时过长，说明页面卡顿。
5. 主线程（Main Thread）
Main 区域展示主线程的执行任务，包括 JavaScript 运行、DOM 更新、样式计算等。主线程受事件循环机制影响，每个任务都是按顺序执行的。
点击某个 Task 可查看详情，例如 Animation Frame Fired 代表 requestAnimationFrame 触发的动画任务。事件下方的 Function call 表示浏览器正在调用一个方法，这里调用的是 anonymous 函数。
点击 anonymous 函数后，切换到下方的 Call Tree 选项卡，即可查看调用栈详情。其中，某个匿名函数耗时 33.5ms，占用了 100% 的执行时间。
展开事件内容后，可查看具体的性能瓶颈。点击 app.js:62:25 链接可跳转至 Sources 选项卡，直接定位到对应的代码行。
这里显示的是每一行代码执行所花费的时间，你可以看到，读取 offsetTop 属性时会触发 Layout 回流，导致性能问题。
总结
Chrome Performance 选项卡 是一个强大的性能分析工具，可以帮助开发者快速找到页面卡顿的原因。在分析过程中，我们主要关注以下几个方面：
- 红色条：指示页面性能瓶颈。
- CPU 负载：查看 JavaScript 和渲染的占比。
- 帧率（Frames）：检查是否有未完全渲染的帧。
- 主线程（Main Thread）：分析 JavaScript 执行耗时。
通过这些信息，我们可以优化代码，提高页面的流畅度。例如，减少不必要的 JavaScript 计算、优化动画方式、降低渲染开销等。
最后
如果觉得本文对你有帮助，欢迎点赞👍、关注➕、收藏❤️，并在评论区交流你的看法！