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