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