ユーザーはインタラクティブでスムーズなページを期待します。 ピクセル パイプラインの各ステージでは、ジャンク (レンダリングの中断) が発生する機会を表します。 ランタイムのパフォーマンスを低下させる一般的な問題を特定して修正するためのツールと戦略について説明します。
要約
ブラウザーにレイアウトの再計算を強制する JavaScript を記述しないでください。 読み取り関数と書き込み関数を分離し、まず読み取りを実行します。
CSS を過度に複雑にしないでください。 CSS の使用量を減らし、CSS セレクターをシンプルにします。
レイアウトはできるだけ避けます。 レイアウトをまったくトリガーしない CSS を選択します。
ペイントには、他のレンダリング アクティビティよりも時間がかかる場合があります。 塗料のボトルネックに注意してください。
JavaScript
JavaScript の計算、特に大幅な視覚的変更をトリガーする計算は、アプリケーションのパフォーマンスを遅らせる可能性があります。 タイミングが悪い JavaScript や実行時間の長い JavaScript がユーザー操作の妨げにならないようにします。
JavaScript: ツール
パフォーマンス ツールで記録を行い、疑わしい長いEvaluate Script イベントを探します。
JavaScript にかなりのジャンク (レンダリングの中断) があることに気付いた場合は、分析を次のレベルに引き上げて JavaScript CPU プロファイルを収集する必要がある場合があります。 CPU プロファイルは、ページの機能内でランタイムが費やされる場所を示します。 JavaScript ランタイムの高速化 (プロファイリングの種類: 「割り当てサンプリング」) で CPU プロファイルを作成する方法について説明します。
JavaScript: 問題
一般的な JavaScript の問題と考えられる解決策を次に示します。
| 問題 | 例 | 解決策 |
|---|---|---|
| 応答またはアニメーションに影響を与える高コストの入力ハンドラー。 | タッチ、視差スクロール。 | ブラウザーにタッチとスクロールを処理させるか、リスナーをできるだけ遅くバインドします。 Paul Lewis 著『ランタイム パフォーマンス チェックリスト』の「Expensive Input Handlers」を参照してください。 |
| タイミングの悪い JavaScript が応答、アニメーション、読み込みに影響を与えます。 | ページの読み込み直後にユーザーがスクロールする、setTimeout / setInterval。 | JavaScript ランタイムの最適化: requestAnimationFrame の使用、DOM 操作のフレームへの分散、Web ワーカーの使用 ( Web ワーカーの使用に関するページを参照)。 |
| 実行時間の長い JavaScript が応答に影響を与えます。 | DOMContentLoaded イベントは、JavaScript の作業でいっぱいになっているため、ストールしています。 | 純粋な計算作業を Web ワーカーに移行します。「 Web ワーカーの使用」を参照してください。 DOM アクセスが必要な場合は、 requestAnimationFrame を使用します。 |
| 応答またはアニメーションに影響を与えるゴミのようなスクリプト。 | ガベージ コレクションは、どこでも発生する可能性があります。 | ゴミっぽいスクリプトを書く。 「The Runtime Performance Checklist」(The Runtime Performance Checklist) の「アニメーションでのガベージ コレクション」 (Paul Lewis 著) を参照してください。 |
形式
スタイルの変更は、特に DOM 内の複数の要素に影響を与える場合、コストがかかります。 要素にスタイルを適用するたびに、ブラウザーは関連するすべての要素への影響を把握し、レイアウトを再計算し、再描画します。
スタイル: ツール
パフォーマンス ツールで録音を行います。 記録に大きな Recalculate Style イベント (紫色で表示) がないか確認します。
Recalculate Style イベントを選択すると、詳細ウィンドウにそのイベントの詳細が表示されます。 スタイルの変更に時間がかかる場合、それはパフォーマンスの低下です。 スタイルの計算が多数の要素に影響する場合、それは改善の余地のある別の領域です。
Recalculate Style イベントの影響を減らすには、レイアウト、ペイント、合成をトリガーする CSS プロパティの使用を最小限に抑えます。 これらのプロパティは、レンダリング パフォーマンスに最も大きな影響を与えます。 詳細については、「web.dev で高パフォーマンス CSS アニメーションを作成する方法」の「レイアウトまたはペイントをトリガーするプロパティを避ける」を参照してください。
スタイル: 問題
次の表では、一般的なスタイルの問題と考えられる解決策について説明します。
| 問題 | 例 | 解決策 |
|---|---|---|
| 応答またはアニメーションに影響を与える高コストなスタイルの計算。 | 幅、高さ、位置など、要素のジオメトリを変更する CSS プロパティ。ブラウザーは他のすべての要素をチェックし、レイアウトを再計算します。 | レイアウトをトリガーする CSS を避けます。 |
| 応答またはアニメーションに影響を与える複雑なセレクター。 | 入れ子になったセレクターは、ブラウザーに親子を含む他のすべての要素に関するすべての情報を強制的に認識させます。 | クラスだけで CSS の要素を参照します。 |
レイアウト
レイアウト (Firefox では リフロー ) は、ブラウザーがページ上のすべての要素の位置とサイズを計算するプロセスです。 Web のレイアウト モデルは、ある要素が他の要素に影響を与える可能性があることを意味します。たとえば、 <body> 要素の幅は通常、子要素の幅に影響します(以下同様です。などといいます。ツリーの上下にまたがって続きます。 このプロセスは、ブラウザーにとってかなり複雑になる場合があります。
一般的な経験則として、フレームが完了する前に DOM から幾何学的な値を要求すると、"強制同期レイアウト" が発生することになります。これは頻繁に繰り返される場合や、大規模な DOM ツリーに対して実行されると、パフォーマンスの大きなボトルネックになる可能性があります。
レイアウト: ツール
[ パフォーマンス ] ウィンドウは、ページによって強制同期レイアウトが発生するタイミングを識別します。 これらの Layout イベントは赤色のバーでマークされます。
"レイアウトのスラッシング" は、強制的な同期レイアウト条件の繰り返しです。 これは、JavaScript が DOM の書き込みと読み取りを繰り返した場合に発生し、ブラウザーはレイアウトを何度も再計算する必要があります。 レイアウトのスラッシングを特定するには、複数の強制同期レイアウト警告のパターンを探します。 前の図を参照してください。
レイアウト: 問題
次の表では、一般的なレイアウトの問題と考えられる解決策について説明します。
| 問題 | 例 | 解決策 |
|---|---|---|
| 応答またはアニメーションに影響を与える強制同期レイアウト。 | ブラウザーにピクセル パイプラインの早い段階でレイアウトを実行すると、レンダリング プロセスの手順が繰り返される。 | 最初にスタイル読み取りをバッチ処理し、次に書き込みを行います。 |
| レイアウトの乱れが応答またはアニメーションに影響を与えます。 | ブラウザーを読み取り/書き込み-読み取り/書き込みのサイクルに入れ、ブラウザーにレイアウトの再計算を何度も強制するループ。 | FastDom ライブラリを使用して読み取り/書き込み操作を自動的にバッチ処理します。 |
ペイントとコンポジット
ペイントは、ピクセルを塗りつぶすプロセスです。 多くの場合、レンダリング プロセスの最もコストのかかる部分です。 ページが設計どおりに動作していないことに気付いた場合は、ペイントに問題がある可能性があります。
合成とは、ページのペイントされた部分をまとめて画面に表示することです。 ほとんどの場合、コンポジター専用のプロパティを使用し、ペイントを完全に回避すると、パフォーマンスが大幅に向上するはずですが、レイヤー数が多すぎることに注意する必要があります。
ペイントと複合: ツール
ペイントにかかる時間やペイントの頻度を調べるには:
DevTools のパフォーマンス ツールで、[Capture settings] ([
![Capture settings] アイコン](index-images/capture-settings-icon.png)
) ボタンをクリックし、[高度なレンダリングのインストルメンテーションを有効にする] チェック ボックスを選択します。レコーディングを撮る。
レンダリング時間のほとんどがペイントに費やされている場合は、ペイントの問題があります。 詳細については、「パフォーマンス機能リファレンス」の「高度なペイント インストルメンテーションを有効にする」を参照してください。
ペイントとコンポジット: 問題
次の表では、塗料や複合材に関する一般的な問題と考えられる解決策について説明します。
| 問題 | 例 | 解決策 |
|---|---|---|
| 応答またはアニメーションに影響を与えるペイント ストーム。 | 大きなペイント エリアまたは高価なペイントが応答やアニメーションに影響を与えます。 | ペイントを避け、独自のレイヤーに移動している要素を昇格し、変換と不透明度を使用します。 |
| アニメーションに影響を与えるレイヤー爆発。 |
translateZ(0)であまりにも多くの要素を過剰に宣伝すると、アニメーションのパフォーマンスに大きく影響します。 |
レイヤーへの昇格は控えめに、具体的な改善がもたらされることがわかっている場合にのみ行います。 |
注
このページの一部の情報は、Google によって作成および共有されている著作物に基づいており、Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページはここにありKayce Basques と Meggin Kearney によって作成されています。
この著作物は、 Creative Commons Attribution 4.0 International License に従って使用許諾されています。