大きな DOM ツリーは、さまざまな形でページのパフォーマンスを低下させる可能性があります。
ネットワークの効率と負荷のパフォーマンス
大きな DOM ツリーには、ユーザーが最初にページを読み込むときに表示されないノードが数多く含まれていることが多く、ユーザーのデータ費用が不必要に増加し、読み込み時間が遅くなります。
ランタイム パフォーマンス
ユーザーとスクリプトがページを操作すると、ブラウザは常にノードの位置とスタイルを再計算する必要があります。大きな DOM ツリーと複雑なスタイルルールを組み合わせると、レンダリングが大幅に遅くなることがあります。
メモリ パフォーマンス
JavaScript で
document.querySelectorAll('li')などの一般的なクエリセレクタを使用している場合、知らないうちに非常に多くのノードへの参照が格納され、ユーザーのデバイスのメモリ能力が過負荷になる可能性があります。
Lighthouse の DOM サイズ監査が失敗する仕組み
Lighthouse では、あるページの DOM 要素の合計数、ページの DOM の最大深度、子要素の最大数が報告されます。
Lighthouse では、次のような DOM ツリーを含むページが報告されます。
- 本文要素のノード数が 800 を超えると警告します。
- 本文要素のノード数が 1,400 を超えるとエラーになります。
DOM サイズを最適化する方法
一般的には、DOM ノードは必要なときだけ作成し、不要になったノードは破棄する方法を探します。
大規模な DOM ツリーを配布している場合は、ページを読み込み、表示されるノードを手動でメモしてみてください。場合によっては、最初に読み込まれたドキュメントから非表示のノードを削除し、スクロールやボタンのクリックなどの関連するユーザー操作の後にのみノードを作成できます。
ランタイムに DOM ノードを作成する場合は、サブツリーの変更 DOM 変更ブレークポイントを使用して、ノードが作成されたタイミングを正確に特定できます。
大きな DOM ツリーがどうしても避けられない場合は、CSS セレクタを簡素化してレンダリング パフォーマンスを改善する方法もあります。詳しくは、Google のスタイル計算の範囲と複雑さを軽減するをご覧ください。
スタック固有のガイダンス
Angular
大きなリストをレンダリングする場合は、Component Dev Kit（CDK）で仮想スクロールを使用します。
対応
- ページ上で多数の繰り返し要素をレンダリングする場合は、
react-windowなどの「ウィンドウ処理」ライブラリを使用して、作成される DOM ノードの数を最小限に抑えます。 shouldComponentUpdate、PureComponent、React.memoのいずれかを使用して、不要な再レンダリングを最小限に抑える。Effectフックを使用してランタイム パフォーマンスを改善している場合、特定の依存関係が変更されるまで効果をスキップする。