Performance
Chrome DevTools 的 Performance 面板（旧称 Timeline）是用于记录和分析网页运行时性能的核心工具。它通过火焰图、时间轴和指标数据，帮助你定位页面卡顿、加载缓慢等性能瓶颈。
以下是详细的使用步骤和核心功能解析：
- 准备工作：模拟真实环境
为了获得更贴近用户真实体验的数据，建议在测试前进行环境配置：
• 开启无痕模式：避免浏览器扩展插件干扰测试结果。
• 开启 CPU 节流：在面板右上角的设置中，将 CPU 设置为 4x slowdown 或 6x slowdown，模拟移动设备的低性能 CPU。
• 开启网络节流：在设置中，将 Network 设置为 Slow 3G 或 Fast 3G，模拟较差的网络环境。
- 核心操作：记录性能数据
根据你的测试目标，选择不同的记录方式：
操作 适用场景 步骤
页面加载分析 分析首次打开页面的速度（LCP、FCP 等） 点击面板左上角的 圆形刷新按钮（Reload page），DevTools 会自动记录页面加载过程并生成报告。
运行时分析 分析用户交互（点击、滚动）或动画的流畅度 点击面板左上角的 黑色圆形按钮（Record），在页面上进行交互操作，然后点击 Stop 按钮结束记录。
- 分析报告：解读关键数据
记录完成后，面板会显示详细的性能报告。重点关注以下三个区域：
A. 概览区域（Overview）
位于报告顶部，显示关键指标的时间轴：
• FPS（绿色）：帧率。红色长条表示帧率过低，页面出现卡顿。
• CPU（彩色）：CPU 使用率。颜色对应底部的 Summary 面板，显示时间花在了脚本、渲染还是绘制上。
• NET（彩色）：网络请求瀑布流，显示资源加载顺序和耗时。
B. 火焰图（Flame Chart / Main）
这是定位性能瓶颈最核心的工具：
• X 轴：时间。横条越长，耗时越长。
• Y 轴：调用栈。上层函数调用下层函数。
• 操作技巧：
◦ 放大：使用鼠标滚轮或拖动时间轴选择器，聚焦到卡顿区域。
◦ 查看详情：点击火焰图中的某个任务，底部的 Summary 面板会显示该任务的耗时和具体代码位置（点击链接可直接跳转到 Sources 面板）。
C. 摘要面板（Summary）
位于底部，显示选中时间段的统计信息：
• Scripting：JavaScript 执行时间。
• Rendering：样式计算和布局（Layout）时间。
• Painting：绘制时间。
• System：浏览器系统时间。
- 高级功能
• 实时 Core Web Vitals：面板顶部会实时显示 LCP（最大内容绘制）、CLS（累积布局偏移） 和 INP（交互到下次绘制） 的分数，帮助你快速判断页面是否符合 Google 的体验标准。
• 截图（Screenshots）：在设置中勾选 Screenshots，记录过程中会截取页面快照。在概览区域左右滑动鼠标，可以像看视频一样回放页面渲染过程，直观看到页面何时变白、何时出现内容。
- 常见性能问题与排查
• 页面卡顿（Jank）：查看 FPS 图表是否有红色长条，然后在火焰图中找到对应的长任务（Task），优化 JavaScript 执行逻辑。
• 加载慢：查看 NET 区域，检查是否有大文件阻塞渲染，或 DNS 查询时间过长。
• 内存泄漏：勾选 Memory 选项后记录，如果 JS Heap 内存曲线持续上升而不下降，可能存在内存泄漏。