実行時のパフォーマンスとは、ページの読み込み時と実行時でのページのパフォーマンスを表します。このチュートリアルでは、Chrome DevTools の [パフォーマンス] パネルを使用してランタイム パフォーマンスを分析する方法について説明します。このチュートリアルで学習するスキルは、RAIL モデルに関して、ページのレスポンス、アニメーション、アイドルの各フェーズを分析するのに役立ちます。
始める
このチュートリアルでは、ライブページで DevTools を開き、パフォーマンス パネルを使用して、ページ上のパフォーマンスのボトルネックを見つけます。
- Google Chrome をシークレット モードで開きます。シークレット モードでは、Chrome をクリーンな状態で実行できます。たとえば、多くの拡張機能がインストールされている場合、それらの拡張機能がパフォーマンス測定でノイズを引き起こすことがあります。
シークレット ウィンドウで次のページを読み込みます。これがプロファイリングを行うデモです。ページが上下に動く小さな青い四角形。
https://googlechrome.github.io/devtools-samples/jank/Command+Option+I キー（Mac）または Ctrl+Shift+I キー（Windows、Linux）を押して、DevTools を開きます。
図 1. 左側のデモ、右側の DevTools
モバイル CPU をシミュレートする
モバイル デバイスの CPU 性能は、パソコンやノートパソコンに比べてはるかに少なくなります。ページをプロファイリングするときは、必ず CPU スロットリングを使用して、モバイル デバイスでのページのパフォーマンスをシミュレートします。
- DevTools で、[パフォーマンス] タブをクリックします。
- [スクリーンショット] チェックボックスがオンになっていることを確認します。
- [Capture Settings]
をクリックします。DevTools に、パフォーマンス指標の収集方法に関する設定が表示されます。 [CPU] で [2 倍の速度] を選択します。DevTools は、CPU が通常の 2 倍遅くなるように CPU をスロットリングします。
図 2. 青い枠で示されている CPU スロットリング
デモをセットアップする
このウェブサイトのすべての読者に対して一貫して機能するランタイム パフォーマンスのデモを作成することは困難です。このセクションでは、特定の設定にかかわらず、デモをカスタマイズして、このチュートリアルのスクリーンショットや説明とエクスペリエンスが相対的に整合するようにします。
- 青い四角形の動きが以前よりもかなり遅くなるまで、[10 個を足す] を繰り返しクリックします。ハイエンド マシンの場合、クリックは約 20 回かかることがあります。
[最適化] をクリックします。青い四角形の動きが速く、なめらかになります。
[最適化を解除] をクリックします。青い四角形は動きが遅く、またジャンクが増えています。
ランタイム パフォーマンスを記録する
最適化されたバージョンのページを実行すると、青い四角形の表示速度が速くなります。なぜでしょう。どちらのバージョンも、各正方形を同じ時間内に同じスペースだけ移動させることが想定されています。パフォーマンス パネルで記録を行い、最適化されていないバージョンでパフォーマンスのボトルネックを検出する方法を確認します。
DevTools で、記録アイコン
をクリックします。DevTools は、ページの実行中にパフォーマンス指標をキャプチャします。
図 3: ページのプロファイリング
数秒待ちます。
[停止] をクリックします。 DevTools が記録を停止してデータを処理し、結果を [パフォーマンス] パネルに表示します。
図 4: プロファイルの結果
すごいデータ量ですね。心配は無用です。すぐに理解できるようになります。
結果を分析する
ページのパフォーマンスを記録したら、ページのパフォーマンスがどの程度低いかを測定し、原因を特定できます。
1 秒あたりのフレーム数を分析する
アニメーションのパフォーマンスを測定するための主な指標は、フレーム/秒（FPS）です。アニメーションが 60 FPS で実行されると、ユーザーは満足できます。
FPS グラフを確認します。[FPS] の上に赤いバーが表示されている場合は、フレームレートが低下し、ユーザー エクスペリエンスを損なう可能性があることを意味します。一般に、緑色のバーが高いほど、FPS が高くなります。
図 5: 青い枠で示された FPS グラフ
FPS グラフの下に、CPU グラフが表示されます。CPU グラフの色は、パフォーマンス パネルの下部にある [概要] タブの色に対応しています。CPU グラフがフルカラーで表示されている場合は、録画中に CPU の処理能力が最大に達したことを意味します。CPU が長時間、最大値に達するような場合は、作業量を減らす方法を見つけるための手がかりになります。
![CPU グラフと [Summary] タブ](https://developer.chrome.google.cn/static/docs/devtools/performance/image/the-cpu-chart-summary-ta-e48a42c71ca45.svg?authuser=2&hl=ja)
図 6: 青い枠で示された CPU チャートと [サマリー] タブ
FPS、CPU、NET のグラフにカーソルを合わせます。DevTools に、その時点でのページのスクリーンショットが表示されます。マウスを左右に動かして、録音を再生します。これはスクラブと呼ばれ、アニメーションの進行を手動で分析する場合に便利です。
図 7: 録画の 2,000 ミリ秒マーク付近のページのスクリーンショットを表示する
[フレーム] セクションで、緑色の四角形のいずれかにカーソルを合わせます。DevTools に、その特定のフレームの FPS が表示されます。各フレームは、おそらく目標の 60 FPS を大幅に下回っています。
図 8: フレームにカーソルを合わせる
もちろん、このデモでは、ページのパフォーマンスが良くないことは一目瞭然です。しかし、実際のシナリオではそれほど明確でない可能性があるため、これらのツールをすべて用意して測定すると便利です。
参考: FPS メーターを開く
もう 1 つの便利なツールは FPS メーターです。ページの実行中に FPS の推定値をリアルタイムで確認できます。
- Command+Shift+P キー（Mac）または Ctrl+Shift+P キー（Windows、Linux）を押して、コマンド メニューを開きます。
- コマンド メニューで「
Rendering」と入力し、[Show Rendering] を選択します。 [Rendering] タブで、[FPS Meter] を有効にします。ビューポートの右上に新しいオーバーレイが表示されます。
図 9: FPS メーター
FPS メーターを無効にし、Esc キーを押して [レンダリング] タブを閉じます。このチュートリアルでは使用しません。
ボトルネックを見つける
アニメーションのパフォーマンスを測定して確認したら、次はその理由を確認しましょう。
概要タブに注目してください。アクティビティが選択されていない場合、このタブにはアクティビティの内訳が表示されます。 ページのレンダリング時間の大部分を占めていました。パフォーマンスとは作業量を減らすことであり、レンダリング処理に費やす時間を削減することが目標です。
![[Summary] タブ](https://developer.chrome.google.cn/static/docs/devtools/performance/image/the-summary-tab-3129fbff07c96.svg?authuser=2&hl=ja)
図 10: 青い枠で示されている [Summary] タブ
[Main] セクションを開きます。DevTools には、メインスレッド上のアクティビティの時系列のフレームチャートが表示されます。X 軸は、記録の経時的な推移を表しています。各バーはイベントを表します。バーの幅が広いほど、イベントに時間がかかったことを意味します。Y 軸はコールスタックを表しています。イベントが互いに重なって表示されている場合は、上位のイベントが低いイベントの原因であることを意味します。
図 11: 青い枠で示されているメイン セクション
録画には大量のデータが含まれています。1 つの Animation Frame Fired イベントを拡大するには、FPS、CPU、NET のグラフを含むセクションである [Overview] 上でマウスをクリック、長押し、ドラッグします。[Main] セクションと [Summary] タブには、記録の選択した部分に関する情報のみが表示されます。
図 12: 単一のアニメーション フレーム配信イベントにズームイン
Animation Frame Fired イベントの右上にある赤い三角形に注目してください。赤い三角形が表示された場合は、このイベントに関連する問題が発生している可能性があることを警告しています。
[Animation Frame Fired] イベントをクリックします。[概要] タブに、そのイベントに関する情報が表示されます。reveal リンクに注目してください。これをクリックすると、DevTools で Animation Frame Fired イベントを開始したイベントがハイライト表示されます。app.js:94 リンクにも注意してください。これをクリックすると、ソースコード内の該当する行に移動します。
![[アニメーション フレームの呼び出し] イベントの詳細](https://developer.chrome.google.cn/static/docs/devtools/performance/image/more-information-the-ani-ef901096dcbc2.png?authuser=2&hl=ja)
図 13: アニメーション フレーム配信イベントの詳細
app.update イベントの下に紫色のイベントが多数あります。幅が広くなれば、それぞれに赤い三角形があるように見えます。紫色のレイアウト イベントのいずれかをクリックします。DevTools の [Summary] タブに、イベントの詳細が表示されます。実際、強制リフロー（レイアウトの別の言葉）に関する警告があります。
[Summary] タブで、[Layout Forced] の下にある app.js:70 リンクをクリックします。DevTools により、レイアウトを強制するコード行が表示されます。
図 13: 強制レイアウトが発生したコード行
ぜひ多くのことを学びましたが、ランタイム パフォーマンスを分析する基本的なワークフローに関する強固な基盤を身に付けることができました。これで完了となります。
参考: 最適化されたバージョンを分析する
先ほど学習したワークフローとツールを使用して、デモの [Optimize（最適化）] をクリックして最適化されたコードを有効にし、もう一度パフォーマンスを記録して、結果を分析します。フレームレートの改善やメイン セクションのフレームチャートでのイベントの削減など、最適化されたバージョンのアプリのほうが作業量が大幅に減り、パフォーマンスが向上していることがわかります。
次のステップ
パフォーマンスを理解するための基盤は RAIL モデルです。このモデルは、ユーザーにとって最も重要なパフォーマンス指標を示します。詳しくは、RAIL モデルによるパフォーマンスの測定をご覧ください。
[パフォーマンス] パネルに慣れるには、練習することが一番です。ご自身のページをプロファイリングし、結果を分析してみてください。結果について不明な点がある場合は、google-chrome-devtools タグが付いた Stack Overflow で質問してください。可能であれば、スクリーンショットや再現可能なページへのリンクを含めます。
ランタイムのパフォーマンスのエキスパートになるには、ブラウザが HTML、CSS、JS を画面上のピクセルに変換する仕組みを学んでください。まずは、レンダリング パフォーマンスの概要をご覧ください。さらに詳しい情報は、The Anatomy Of A Frame をご覧ください。
最後に、ランタイム パフォーマンスを改善する方法は数多くあります。このチュートリアルでは、1 つのアニメーションのボトルネックに焦点を当てて [パフォーマンス] パネルの概要を説明しますが、これは多くのボトルネックのうちの一つにすぎません。レンダリング パフォーマンス シリーズの残りの部分では、ランタイム パフォーマンスのさまざまな側面を向上させるため、次のような多くのヒントを紹介します。