大規模な DOM ツリーは、さまざまな方法でページのパフォーマンスを低下させる可能性があります。
ネットワーク効率と読み込みパフォーマンス
大規模なDOMツリーには、ユーザーが最初にページを読み込んだときに表示されないノードが多数含まれていることがよくあります。これにより、ユーザーのデータコストが不要に増加し、読み込み時間が遅くなります。
ランタイムのパフォーマンス
ユーザーとスクリプトはページと対話するため、ブラウザはノードの位置とスタイルを絶えず再計算する必要があります。複雑なスタイルルールが伴う大規模な DOM ツリーは、レンダリングを大幅に遅らせる可能性があります。
メモリのパフォーマンス
JavaScript が
document.querySelectorAll('li')などの一般的なクエリセレクターを使用している場合、非常に多数のノードへの参照を無意識のうちに保存している可能性があり、これによりユーザーのデバイスのメモリ機能を抑え込む可能性があります。
Lighthouse の DOM サイズ監査が失敗する原因
Lighthouse は、ページの DOM 要素の合計、ページの最大 DOM 深度、およびその最大子要素を報告します。
Lighthouse は DOM ツリーのあるページに以下のようなフラグを設定します。
- Body 要素に約 800 を超えるノードがあることを警告します。
- Body 要素に約 1,400 を超えるノードがある場合はエラーとなります。
See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.
DOM サイズを最適化するには
一般に、必要な場合にのみ DOM ノードを作成し、不要になったら破棄する方法を探してください。
現在、大規模な DOM ツリーを公開している場合は、ページを読み込んで、度のノードを表示するかを手動で指定するようにします。おそらく、表示されていないノードは最初に書見込まれるドキュメントから除去し、スクロールやボタンクリックといった関連するユーザー操作の後にのみ作成するようにすることができます。
ランタイム時に DOM ノードを作成する場合は、DOM 変更ブレークポイントでサブツリーの変更を使用すると、ノードが作成されるタイミングをピンポイントするのに役立ちます。
大規模な DOM ツリーを避けられない場合は、CSS セレクターを単純化することで、レンダリングのパフォーマンスを改善することができます。詳細は、Google の「スタイル計算の範囲と複雑さを軽減する」をご覧ください。
スタック特定のガイダンス
Angular
大規模なリストをレンダリングする場合は、Component Dev Kit（CDK）の仮想スクロールを使用してください。
React
- ページで多数の反復要素をレンダリングしている場合は、
react-windowなどの「ウィンドウイング」ライブラリを使用して、作成される DOM の数を最小限に抑えてください。 shouldComponentUpdate、PureComponent、またはReact.memoを使って、不要な再レンダリングを最小限に抑えてください。- ランタイムのパフォーマンスを改善するために
Effectフックを使用している場合は、特定の依存関係が変更するまでのみ効果をスキップしてください。
リソース
更新日 • 記事を改善する