Connor Clark
公開日: 2025 年 10 月 8 日
DOM サイズが大きいと、スタイルの計算とレイアウトに時間がかかり、ページの応答性に影響する可能性があります。DOM サイズが大きいと、メモリ使用量も増加します。
深い DOM ツリー自体はパフォーマンスの問題ではありませんが、不要な要素のネストを使用するデザイン パターンの兆候です。
この分析情報では、シャドー ルート内を含め、DOM 全体が考慮されます。要素ではない DOM ノードは無視されます。また、<iframe> の内容も無視します。
確認事項
- 要素の合計数: ページの DOM 内の要素の総数。
- DOM の深さ: DOM ツリーの最大深度。
- 子要素が最も多い: 子要素が最も多い要素。
この分析情報を渡す方法
この分析情報は、レイアウトまたはスタイルの再計算が 40 ミリ秒を超える場合にのみ失敗します。
- 大規模なレイアウト更新には、100 個を超えるレイアウト オブジェクト（おおよそ要素）が含まれます。
- 大規模なスタイルの再計算は、300 個を超える要素に影響します。
失敗すると、[パフォーマンス] パネルのこの分析情報で、これらのイベントがフレーム グラフでハイライト表示されます。
これらのイベントの費用を削減するには:
- CSS セレクタのコストを測定し、スタイルの複雑さを軽減する方法についてご説明します。
- 不要なネストを減らして DOM の深さを最小限に抑えます。
- Shadow DOM を使用するために Web Components の採用を検討してください。DOM のサイズは小さくなりませんが、スタイルの再計算のコストは削減できます。
スタック固有のガイダンス
この分析情報では、次のテクノロジーを使用するページについて、スタック固有のガイダンスも提供されます。
Angular
大きなリストをレンダリングする場合は、Component Dev Kit（CDK）で仮想スクロールを使用します。
対応
- ページに多くの繰り返し要素をレンダリングする場合は、作成される DOM ノードの数が最小限で済むように、
react-windowなどの「ウィンドウ処理」用のライブラリを使用してください。 shouldComponentUpdate、PureComponent、またはReact.memoを使用して、不要な再レンダリングを最小限に抑えます。- ランタイム パフォーマンスの向上に
Effectフックを使用している場合は、特定の依存関係が変化するところまでのみ効果をスキップします。