序文
パフォーマンスでは、運用中のサイトのパフォーマンス データを記録できます。これらのパフォーマンス データを使用して、ページ全体の実行プロセスを再生できるため、各時間帯でのページの動作を特定して診断するのに便利で、効果的に実行できます。ページのパフォーマンスのボトルネックを見つけるのに役立ちます。
通常、パフォーマンスを使用するには、次の 3 つの手順が必要です。
- 最初のステップは、パフォーマンスを構成することです。
- 2 番目のステップは、レポート ページを生成することです。
- 3 番目のステップは、レポート ページを手動で分析し、ページのパフォーマンスのボトルネックを特定することです。
次に、上記の 3 つの手順に従ってパフォーマンスに慣れ、パフォーマンスを使用してページのパフォーマンス データを分析する方法を理解しましょう。
パフォーマンスの構成
Chrome で任意のサイトを開き、Chrome 開発者ツールを開いて [パフォーマンス] タブを選択すると、最終的な効果は次の図のようになります。
上の図はパフォーマンスの構成ページです。図の領域 1 を観察すると、この領域で「ネットワーク」を設定してネットワークの読み込み速度を制限し、「CPU」を設定して CPU の動作速度を制限できます。この設定により、Chrome ブラウザ上で携帯電話などのパフォーマンスの低いデバイスをシミュレートできます。ここではCPUの演算能力を1/6に落とし、ネットワークの読み込み速度を「高速3G（Fast 3G）」に設定して3Gのネットワーク状態をシミュレートしました。
上の領域 2 と領域 3 には 2 つのボタンがあることがわかります。上の黒いボタンはインタラクション フェーズのパフォーマンス データを記録するために使用され、下の黒いボタンはローディング フェーズのパフォーマンス データを記録するために使用されます。
また、2 つの記録方法が若干異なることにも注意してください。
- 読み込みフェーズでパフォーマンス データを記録すると、パフォーマンスはページを更新し、ページが完全にレンダリングされるまで待機し、その後パフォーマンスは自動的に記録を停止します。
- インタラクティブフェーズのパフォーマンスを記録している場合は、記録プロセスを手動で停止する必要があります。
レポートページを見る
どの記録方法を使用しても、最終的に生成されるレポート ページは、次の図に示すように同じです。
上図のレポート ページを観察すると、概要パネル、パフォーマンス パネル、詳細パネルという 3 つの主要な部分に分けることができます。
概要パネル
有了概览面板，我们就能一览几个关键的历史数据指标，进而能快速定位到可能存在问题的时间节点。那么如何定位可能存在问题的时间节点呢？
- 如果 FPS 图表上出现了红色块，那么就表示红色块附近渲染出一帧所需时间过久，帧的渲染时间过久，就有可能导致页面卡顿。
- 如果 CPU 图形占用面积太大，表示 CPU 使用率就越高，那么就有可能因为某个 JavaScript 占用太多的主线程时间，从而影响其他任务的执行。
- 如果 V8 的内存使用量一直在增加，就有可能是某种原因导致了内存泄漏。
除了以上指标以外，概览面板还展示加载过程中的几个关键时间节点，如 FP、LCP、DOMContentLoaded、Onload 等事件产生的时间点。这些关键时间点体现在了几条不同颜色的竖线上。
性能面板
通常，我们通过概览面板来定位到可能存在问题的时间节点，接下来需要更进一步的数据，来分析导致该问题的原因，那么应该怎么分析呢？
这就需要引入性能面板了，在性能面板中，记录了非常多的性能指标项，比如 Main 指标记录渲染主线程的任务执行过程，Compositor 指标记录了合成线程的任务执行过程，GPU 指标记录了 GPU 进程主线程的任务执行过程。有了这些详细的性能数据，就可以帮助我们轻松地定位到页面的性能问题。
比如概览面板中的 FPS 图表中出现了红色块，那么我们点击该红色块，性能面板就定位到该红色块的时间节点内了，你可以参考下图：
观察上图，我们发现性能面板的最上方也有一段时间线，比如上面这个时间线所展示的是从 360 毫秒到 480 毫秒，这段时间就是我们所定位到的时间节点，下面所展示的 Network、Main 等都是该时间节点内的详细数据。
详情面板
比如主线程上执行了解析 HTML(ParserHTML) 的任务，对应于性能面板就是一个长条和多个竖条组成图形。通过上面的图形我们只能得到一个大致的信息，如果想要查看这些记录的详细信息，就需要引入详情面板了。
你可以通过在性能面板中选中性能指标中的任何历史数据，然后选中记录的细节信息就会展现在详情面板中了。比如我点击了 Main 指标中的 ParserHTML 这个过程，下图就是详情面板展现该过程的详细信息。
由于详情面板所涉及的内容很多，这里就不展开具体讲了。