构建全面的 Chrome 性能分析武器库，10分钟便可通晓

一个新工具，强大功能等你来探索

一、Performance 面板初探：解构分析工具箱

1. 面板鸟瞰：
   在 Performance 面板中，界面被划分为多个区域：

• 记录栏： 位于顶部，可控制录制过程，并提供概览图，帮助你快速了解录制结果。
• 时间线图： 位于中心，展示了页面加载过程中的各项活动，一目了然。
• 事件列表： 位于下方，列出了页面加载过程中所有记录下来的事件。

2. 工具栏：
   工具栏包含了各种功能按钮，助你高效录制和分析性能：

• 录制按钮： 启动或停止录制过程。
• 导出按钮： 将录制的数据导出为 JSON 或 HAR 文件。
• 清除按钮： 清除所有录制的数据。
• 缩放按钮： 可调整时间线图的缩放比例。

二、关键指标解读：全面掌握性能瓶颈

1. 加载时间：
   专注于四个重要加载指标：

• 首次内容绘制时间 (FCP)： 用户首次看到页面任何内容时的时间。
• 首次有意义绘制时间 (FMP)： 用户首次看到有意义内容（如文本或图像）时的时间。
• DOMContentLoaded 事件时间： HTML 文档解析完成并 DOM 树构建完毕的时间。
• 加载事件时间： 页面所有资源（包括样式表、图像和脚本）完全加载完毕的时间。

2. 主线程：
   确保主线程保持畅通无阻：

• CPU 使用率： 了解应用程序在页面加载期间对 CPU 资源的使用情况。
• 网络请求： 深入了解应用程序与服务器交互的情况，识别请求延迟和阻塞等问题。
• 任务： 分析脚本执行情况，找出可能导致主线程阻塞的任务。

3. 内存：
   监控应用程序的内存使用情况，避免内存泄漏：

• 内存分配： 查看应用程序分配的内存量，识别内存泄漏等问题。
• 堆快照： 生成内存快照，帮助你深入分析应用程序的内存使用情况。

4. 帧速率：
   关注帧速率指标，确保页面动画流畅：

• 帧速率： 了解页面每秒渲染的帧数，识别动画卡顿等问题。
• 帧时间： 分析每帧渲染所花费的时间，找出导致卡顿的具体原因。

三、深入洞察技巧：进阶性能优化之道

1. 自定义事件：
   を活用して、アプリケーションのパフォーマンスを測定します。

• 标记关键事件： 使用自定义事件标记应用程序中的关键步骤，以便于分析。
• 分析自定义事件： 审查自定义事件的执行时间和性能影响。

2. 瀑布图：
   瀑布图让你直观地了解资源加载过程：

• 加载瀑布图： 查看所有资源的加载顺序和持续时间。
• 识别性能瓶颈： 找出加载缓慢的资源，优化其加载方式。

3. 内存分布：
   掌握应用程序的内存分配情况：

• 内存使用情况： 查看应用程序在不同阶段的内存使用情况。
• 识别内存泄漏： 发现并修复应用程序中的内存泄漏问题。

掌握 Chrome 性能分析面板，助你成为网页性能优化的专家。

结论

Chrome 性能分析面板是网页性能优化过程中不可或缺的利器。本文通过详细的讲解，带领你快速掌握 Performance 面板的使用技巧，从加载时间到主线程、内存、帧速率等各个方面，全面提升你的性能分析能力。