パフォーマンスツールの概要

[アーティクル]
11/07/2024

実行時のパフォーマンス は、読み込みではなく、実行中のページのパフォーマンスです。次のチュートリアルでは、DevTools パフォーマンスツールを使用してランタイム パフォーマンス を分析する方法について説明します。

このチュートリアルで学習するスキルは、Web コンテンツの読み込み、対話性、視覚的安定性を分析するのに役立ちます。これは、 Core Web Vitals の重要な指標でもあります。各 Core Web Vitals は、ユーザーエクスペリエンスの個別のファセットを表し、現場で測定可能であり、重要なユーザー中心の結果の実際のエクスペリエンスを反映しています。これらのコア Web バイタルは 、パフォーマンス ツールで確認できます。

使ってみる

次のチュートリアルでは、"低調なアニメーション" デモページで DevTools を開き、 パフォーマンス ツールを使用してページでパフォーマンスのボトルネックを見つけます。

InPrivate タブまたはウィンドウで、低調なアニメーションデモページを開きます。これを行うには、リンクを右クリックし、[ InPrivate] ウィンドウで [リンクを開く] を選択します。このページをプロファイリングします。このページには、上下に移動するアイコンの可変数が表示されます。 InPrivate の詳細については、「Microsoft Edge で InPrivate を参照する」を参照してください。

ソースコード: MicrosoftEdge/Demos > devtools-performance-get-started。
Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押して DevTools を開きます。

残りのスクリーンショットでは、DevTools は別のウィンドウにドッキング解除されて表示されます。

モバイル CPU をシミュレートする

モバイルデバイスの CPU パワーは、デスクトップやノート PC よりもはるかに少なくなります。ページをプロファイリングするときは常に、CPU 調整を使用して、モバイルデバイスでのページのパフォーマンスをシミュレートします。

DevTools で、 パフォーマンス ツールを開きます。
[ キャプチャ設定 ] () をクリックします。 DevTools では、パフォーマンスメトリックのキャプチャ方法に関連する設定が表示されます。
[CPU] の場合は、[4 倍の速度低下] を選択します。 DevTools は CPU を調整して、通常の 4 倍遅くなります。

ローエンドモバイルデバイスでページが適切に動作するようにするには、 CPU を 6 倍の速度低下に設定します。

デモを設定する

次のセクションでは、デモをカスタマイズして、エクスペリエンスがスクリーンショットと説明と比較的一致していることを確認できます。

青色のアイコンが以前よりも著しく遅くなるまで、[ 要素の追加] ボタンをクリックします。ハイエンドマシンでは、約 20 回クリックできます。
[ 最適化] をクリックします。青いアイコンは、より速く、よりスムーズに移動する必要があります。
最適化されたバージョンと最適化されていないバージョンの違いをより適切に表示するには、[ 要素の削除 ] ボタンを数回クリックして、もう一度やり直してください。青いアイコンを追加しすぎると、CPU を最大限に引き出すことができ、2 つのバージョンの結果に大きな違いが見られない可能性があります。
[ 低速] をクリックします。青いアイコンの移動速度が遅くなり、もう一度低調になります。

ランタイムのパフォーマンスを記録する

最適化されたバージョンのページを実行すると、青いアイコンの移動速度が速くなります。なぜですか? どちらのバージョンも、同じ時間にアイコンを同じ量の領域に移動する必要があります。 パフォーマンス ツールで記録を取り、最適化されていないバージョンでパフォーマンスのボトルネックを検出する方法について説明します。

DevTools で、[ レコード ()] をクリックします。 DevTools は、ページの実行時にパフォーマンスメトリックをキャプチャします。
数秒待ちます。
[ 停止] をクリックします。 DevTools は記録を停止し、データを処理し、その結果を パフォーマンス ツールに表示します。

これらのパフォーマンス結果は圧倒的な量のデータを示しますが、すぐにはもっと意味があります。

結果を分析する

ページのパフォーマンスを記録したら、ページのパフォーマンスを評価し、パフォーマンスの問題の原因を見つけることができます。

CPU グラフが上部に表示されます。 CPU グラフの色は、パフォーマンス ツールの下部にある [概要] パネルの色に対応します。 CPU グラフは、これらのリージョンが大きな領域を構成していることを示しています。つまり、記録中に CPU が最大にされたということです。 CPU が長時間最大化されるたびに、ページのパフォーマンスが良好でないことを示します。
CPU グラフまたは NET グラフにカーソルを合わせます。 DevTools には、その時点でのページのスクリーンショットが表示されます。マウスを左右に動かして録音を再生します。アクションは スクラブと呼ばれ、パフォーマンス記録の進行状況を手動で分析するのに役立ちます。

ボーナス: フレームレンダリング統計オーバーレイを開く

もう 1 つの便利なツールは、ページの実行時に FPS のリアルタイム推定を提供する フレームレンダリング統計 オーバーレイです。 フレームレンダリング統計オーバーレイは、このチュートリアルでは必要ありませんが、役に立つ分析情報を提供する場合があります。

DevTools で、 Ctrl + Shift + P (Windows、Linux) または Command + Shift + P (macOS) を押して コマンドメニューを開きます。
コマンドメニューで「Rendering」と入力し、[レンダリングの表示] をクリックします。
レンダリング ツールで、[フレームレンダリング統計] をオンにします。Web ページの左上に新しいオーバーレイが表示されます。
FPS データの確認が完了したら、[ フレームレンダリング統計 ] チェックボックスをオフにしてオーバーレイを非表示にします。

ボトルネックを見つける

アニメーションのパフォーマンスが良好でないことを確認したら、次の手順として"理由" という質問に答えます。

イベントが選択されていない場合、[ 概要 ] パネルにアクティビティの内訳が表示されます。ページはレンダリングにほとんどの時間を費やしました。パフォーマンスは作業を減らす技術であるため、目的はレンダリング作業に費やす時間を短縮することです。
[Main] セクションを展開します。 DevTools では、メインスレッドでのアクティビティの炎のグラフが時間の経過と同時に表示されます。 x 軸は、時間の経過に伴う記録を表します。各バーはイベントを表します。バーが広いと、イベントに時間がかかったことを意味します。 y 軸は呼び出し履歴を表します。イベントが互いに積み重ねられている場合は、上位のイベントが低いイベントの原因であることを意味します。
記録には多くのデータがあります。記録の一部を拡大するには、[ 概要 ] 領域をクリックして 、[パフォーマンス ] ツールの上部にドラッグします。 [概要] 領域には、CPU グラフと NET グラフ (右側に示されています) が含まれています。 [メイン] セクションと [概要] パネルには、記録の選択した部分の情報のみが表示されます。

選択した領域を変更するもう 1 つの方法は、[ メイン ] セクションにフォーカスを置き、背景またはイベントをクリックして、次のように押します。
- W 拡大するには、 S 縮小します。
- A 選択を左に移動するには、選択を右に移動 D 。
アニメーションフレーム発生イベントをクリックします。

イベントの右上に赤い三角形が表示されると、イベントに関連する問題が発生する可能性があるという警告が表示されます。 Animation Frame Fired イベントは、requestAnimationFrame() コールバックが実行されるたびに発生します。

[ 概要] パネルには、そのイベントに関する情報が表示されます。
[ 表示 ] リンクをクリックします。 DevTools では、 アニメーションフレーム発生 イベントを開始したイベントが強調表示されます。
[app.js:125] リンクをクリックします。ソース ツールには 、関連するソースコード行が表示されます。
マウスホイールまたはトラックパッドを使用して、 アニメーションフレーム発生 イベントとその子イベントを拡大します。または、 W キーを押します。

アニメーションの 1 つのフレームがレンダリングされたときに発生するイベントを確認できるようになりました。 update 関数が呼び出され、updateSlow 関数が呼び出されます。これにより、多くの再計算スタイルとレイアウト イベントがトリガーされます。
紫色の Layout イベントのいずれかをクリックします。 DevTools は、[ 概要 ] パネルでイベントの詳細を提供します。 "強制リフロー" (再レイアウト) に関する警告があります。
[概要] パネルで、[レイアウトの強制] の [app.js:104] リンクをクリックします。 DevTools では、ソースツールでレイアウトを強制したコード行に移動 します 。

最適化されていないコードの問題は、各アニメーションフレームで各アイコンのスタイルを変更し、ページ上の各アイコンの位置を照会することです。スタイルが変更されたため、各アイコンの位置が変更されたかどうかはブラウザーで認識されないため、新しい位置を計算するには、アイコンを再レイアウトする必要があります。

最適化されたバージョンを分析する

学習したワークフローとツールを使用して、デモ Web ページで [最適化済 み] をクリックして、最適化されたコードを有効にし、別のパフォーマンス記録を行い、結果を分析します。改善されたフレームレートから 、Main セクションの炎グラフのイベントの減少まで、アプリの最適化されたバージョンははるかに少ない作業を行い、パフォーマンスが向上します。

最適化されていないバージョン

最適化されていないバージョンのアプリから JavaScript の次のスニペットを比較します。

// Read the current position.
const currentPos = element.offsetTop;
// Read the direction.
const direction = element.dataset.dir;
// Calculate the next position.
let nextPos = direction === 'up' ? currentPos - SPEED : currentPos + SPEED;

// If the new position is out of bounds, reset it.
if (nextPos < 0) {
  nextPos = 0;
} else if (nextPos > canvas.offsetHeight) {
  nextPos = canvas.offsetHeight;
}

// Set the new position on the element.
element.style.top = `${nextPos}px`;

// Switch the direction if needed.
if (element.offsetTop === 0) {
  element.dataset.dir = 'down';
} else if (element.offsetTop === canvas.offsetHeight) {
  element.dataset.dir = 'up';
}

上記のコードスニペットは、ブラウザーのレンダリングループのすべてのフレームで、ページ上の青いアイコンごとに実行されます。 element変数は、1 つの青いアイコンを参照します。

この最適化されていないバージョンでは、アイコンの現在の位置に設定された nextPos 変数を作成し、そこで距離を追加します。アイコンの現在の位置は、 element.offsetTopを使用して読み取られます。

アイコンがまだページの境界内にあることを確認した後、要素にインラインスタイルを設定する element.style.top を使用して新しい位置を設定します。

最後に、もう一度 element.offsetTop 読んで、アイコンの方向を調整します。

最適化されたバージョン

最適化されたコードでは、さまざまな一連のアクションを使用して、作業を減らします。最適化されたバージョンのアプリの JavaScript の同じスニペットを次に示します。

// Read the current position.
const currentPos = parseFloat(element.style.transform.match(/[0-9.]+/)[0]);
// Read the direction.
const direction = element.dataset.dir;
// Calculate the next position.
let nextPos = direction === 'up' ? currentPos - (SPEED * 100 / canvasHeight) : currentPos + (SPEED * 100 / canvasHeight);

// If the new position is out of bounds, reset it, and switch the direction.
if (nextPos < 0) {
  nextPos = 0;
  element.dataset.dir = 'down';
} else if (nextPos > 100) {
  nextPos = 100;
  element.dataset.dir = 'up';
}

// Set the new position on the element.
element.style.transform = `translateY(${nextPos}vh)`;

最適化されたバージョンでは、まず、element.offsetTopを使用するのではなく、element.style.transformを読み取ってnextPos変数の値を設定します。要素のインラインスタイルの使用は高速です。読み取り element.offsetTop 、ブラウザーエンジンはページ上のすべての要素がどこにあるかを知る必要があるため、エンジンはスタイルとレイアウトを再計算する必要があります。

その後、アイコンの方向を調整しますが、今回は最適化されていないバージョンで行ったように element.offsetTop をもう一度読み取りません。

最後に、アイコンの新しい位置を設定しますが、今回はelement.style.topではなくelement.style.transformを使用します。 CSS transform プロパティは、ページのレイアウトを再計算しなくてもブラウザーレンダリングエンジンによって適用できるため、element.style.transformの使用が高速です。 transform プロパティを使用する場合、ブラウザーは各アイコンを個々のレイヤーと見なし、最終的なイメージを再合成することで、これらのレイヤーを正しい位置に表示します。

詳細については、「アニメーションに変換と不透明度の変更を使用する」を参照してください。

次のステップ

パフォーマンス ツールに慣れるためには、ページのプロファイリングと結果の分析を練習します。

結果について質問がある場合は、 アクティビティバーで [ ヘルプ ] () >Feedback を選択します。または、 Alt + Shift + I (Windows、Linux) または Option + Shift + I (macOS) を押します。

または、 MicrosoftEdge/DevTools リポジトリに問題を報告します。

フィードバックには、可能であれば、再現可能なページへのスクリーンショットまたはリンクを含めます。

ランタイムのパフォーマンスを向上させるには、さまざまな方法があります。この記事では、 パフォーマンス ツールの焦点を絞ったツアーを提供するために、特定のアニメーションのボトルネックに焦点を当てていますが、発生する可能性があるボトルネックの 1 つに過ぎません。

注

このページの一部の情報は、Google によって作成および共有されている著作物に基づいており、Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。元のページはここにあり、ケイス・バスクによって作成されています。

この作品は、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。

次の方法で共有

パフォーマンスツールの概要