前言
Performance 可以记录站点在运行过程中的性能数据，有了这些性能数据，我们就可以回放整个页面的执行过程，这样就方便我们来定位和诊断每个时间段内页面的运行情况，从而有效帮助我们找出页面的性能瓶颈。
通常，使用 Performance 需要分三步走：
- 第一步是配置 Performance。
- 第二步是生成报告页。
- 第三步就是人工分析报告页，并找出页面的性能瓶颈。
接下来，我们根据上面这三个步骤来熟悉 Performance，并了解如何使用 Performance 来分析页面性能数据。
配置 Performance
我们在 Chrome 中任意打开一个站点，再打开 Chrome 开发者工具，然后选择 Performance 标签，最终效果如下图所示：
上图就是 Performance 的配置页，观察图中区域 1，我们可以设置该区域中的“Network”来限制网络加载速度，设置“CPU”来限制 CPU 的运算速度。通过设置，我们就可以在 Chrome 浏览器上来模拟手机等性能不高的设备了。在这里我将 CPU 的运算能力降低到了 1/6，将网络的加载速度设置为“快的 3G(Fast 3G)”用来模拟 3G 的网络状态。
上图区域 2 和区域 3，我们可以看到这里有两个按钮，上面那个黑色按钮是用来记录交互阶段性能数据的，下面那个黑色按钮用来记录加载阶段的性能数据。
另外还要注意一点，这两种录制方式稍微有点不同：
- 当你录制加载阶段的性能数据时，Performance 会重新刷新页面，并等到页面完全渲染出来后，Performance 就会自动停止录制。
- 如果是录制交互阶段的性能时，那么需要手动停止录制过程。
认识报告页
无论采用哪种方式录制，最终所生成的报告页都是一样的，如下图所示：
观察上图的报告页，我们可以将它分为三个主要的部分，分别为概览面板、性能面板和详情面板。
概览面板
有了概览面板，我们就能一览几个关键的历史数据指标，进而能快速定位到可能存在问题的时间节点。那么如何定位可能存在问题的时间节点呢？
- 如果 FPS 图表上出现了红色块，那么就表示红色块附近渲染出一帧所需时间过久，帧的渲染时间过久，就有可能导致页面卡顿。
- 如果 CPU 图形占用面积太大，表示 CPU 使用率就越高，那么就有可能因为某个 JavaScript 占用太多的主线程时间，从而影响其他任务的执行。
- 如果 V8 的内存使用量一直在增加，就有可能是某种原因导致了内存泄漏。
除了以上指标以外，概览面板还展示加载过程中的几个关键时间节点，如 FP、LCP、DOMContentLoaded、Onload 等事件产生的时间点。这些关键时间点体现在了几条不同颜色的竖线上。
性能面板
通常，我们通过概览面板来定位到可能存在问题的时间节点，接下来需要更进一步的数据，来分析导致该问题的原因，那么应该怎么分析呢？
这就需要引入性能面板了，在性能面板中，记录了非常多的性能指标项，比如 Main 指标记录渲染主线程的任务执行过程，Compositor 指标记录了合成线程的任务执行过程，GPU 指标记录了 GPU 进程主线程的任务执行过程。有了这些详细的性能数据，就可以帮助我们轻松地定位到页面的性能问题。
比如概览面板中的 FPS 图表中出现了红色块，那么我们点击该红色块，性能面板就定位到该红色块的时间节点内了，你可以参考下图：
观察上图，我们发现性能面板的最上方也有一段时间线，比如上面这个时间线所展示的是从 360 毫秒到 480 毫秒，这段时间就是我们所定位到的时间节点，下面所展示的 Network、Main 等都是该时间节点内的详细数据。
详情面板
比如主线程上执行了解析 HTML(ParserHTML) 的任务，对应于性能面板就是一个长条和多个竖条组成图形。通过上面的图形我们只能得到一个大致的信息，如果想要查看这些记录的详细信息，就需要引入详情面板了。
你可以通过在性能面板中选中性能指标中的任何历史数据，然后选中记录的细节信息就会展现在详情面板中了。比如我点击了 Main 指标中的 ParserHTML 这个过程，下图就是详情面板展现该过程的详细信息。
由于详情面板所涉及的内容很多，这里就不展开具体讲了。