| layout | title | description | date | updated | tags | |
|---|---|---|---|---|---|---|
layouts/doc-post.njk |
過大な DOM サイズを回避 |
大規模な DOM によって Web ページのパフォーマンスが低下してしまうことと、読み込み時に DOM のサイズを縮小する方法を学びます。 |
2019-05-02 |
2019-10-04 |
|
大規模な DOM ツリーは、さまざまな方法でページのパフォーマンスを低下させる可能性があります。
-
ネットワーク効率と読み込みパフォーマンス
大規模なDOMツリーには、ユーザーが最初にページを読み込んだときに表示されないノードが多数含まれていることがよくあります。これにより、ユーザーのデータコストが不要に増加し、読み込み時間が遅くなります。
-
ランタイムのパフォーマンス
ユーザーとスクリプトはページと対話するため、ブラウザはノードの位置とスタイルを絶えず再計算する必要があります。複雑なスタイルルールが伴う大規模な DOM ツリーは、レンダリングを大幅に遅らせる可能性があります。
-
メモリのパフォーマンス
JavaScript が
document.querySelectorAll('li')などの一般的なクエリセレクターを使用している場合、非常に多数のノードへの参照を無意識のうちに保存している可能性があり、これによりユーザーのデバイスのメモリ機能を抑え込む可能性があります。
Lighthouse は、ページの DOM 要素の合計、ページの最大 DOM 深度、およびその最大子要素を報告します。
{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/SUCUejhAE77m6k2WyI6D.png", alt="Lighthouse の「過大な DOM サイズを回避」監査のスクリーンショット", width="800", height="363" %}Lighthouse は DOM ツリーのあるページに以下のようなフラグを設定します。
- Body 要素に約 800 を超えるノードがあることを警告します。
- Body 要素に約 1,400 を超えるノードがある場合はエラーとなります。
{% Partial 'lighthouse-performance/scoring.njk' %}
一般に、必要な場合にのみ DOM ノードを作成し、不要になったら破棄する方法を探してください。
現在、大規模な DOM ツリーを公開している場合は、ページを読み込んで、度のノードを表示するかを手動で指定するようにします。おそらく、表示されていないノードは最初に書見込まれるドキュメントから除去し、スクロールやボタンクリックといった関連するユーザー操作の後にのみ作成するようにすることができます。
ランタイム時に DOM ノードを作成する場合は、DOM 変更ブレークポイントでサブツリーの変更を使用すると、ノードが作成されるタイミングをピンポイントするのに役立ちます。
大規模な DOM ツリーを避けられない場合は、CSS セレクターを単純化することで、レンダリングのパフォーマンスを改善することができます。詳細は、Google の「スタイル計算の範囲と複雑さを軽減する」をご覧ください。
大規模なリストをレンダリングする場合は、Component Dev Kit（CDK）の仮想スクロールを使用してください。
- ページで多数の反復要素をレンダリングしている場合は、
react-windowなどの「ウィンドウイング」ライブラリを使用して、作成される DOM の数を最小限に抑えてください。 shouldComponentUpdate、PureComponent、またはReact.memoを使って、不要な再レンダリングを最小限に抑えてください。- ランタイムのパフォーマンスを改善するために
Effectフックを使用している場合は、特定の依存関係が変更するまでのみ効果をスキップしてください。