DOMノード数がパフォーマンスに与える大きな影響
ブラウザはHTMLを解析してDOMツリーを作り、そこにCSSを適用してレンダーツリーを構成し、画面に描画します。この過程で1つ1つのノードがメモリを占有し、スタイル再計算やレイアウト(リフロー)演算の対象になります。ノード数が多いほど、JavaScriptでスタイルを変更したり要素を追加・削除したりするたびにブラウザが再計算すべき範囲が広がり、目に見えて遅くなります。Google Lighthouseは1,500個以下のDOMノード数を推奨し、3,000個を超えるとパフォーマンス警告を表示します。
DOM階層(最大ネスト段数)も重要な指標です。ネストが深いほどCSSセレクタのマッチングやイベントバブリングの経路が長くなり、特定のスタイル変更が上位・下位ノードに影響する範囲も広がります。Lighthouseは最大階層32段以下、親ノードあたりの子ノード60個以下を推奨基準としています。
このツールは入力されたノード数と階層を基準に、パフォーマンス評価と概算のメモリ使用量を推定します。実際のパフォーマンスはCSSの複雑さ、JavaScriptの実行量、端末性能によって変わるため、絶対的な数値ではなく改善の方向性をつかむ参考資料として活用してください。ノード数が多い場合は、仮想スクロールやページネーション、不要なラッパー要素の削除をまず検討することをお勧めします。
よくある質問
Google Lighthouseは1,500個以下を推奨し、3,000個を超えると明らかなパフォーマンス低下が現れる可能性があると警告しています。
ノードが多いほどスタイル再計算とレイアウト(リフロー)のコストが増え、メモリ使用量も増加してレンダリングとスクリプト実行が遅くなります。
仮想スクロールを適用したり、不要なラッパー要素を削除し、条件付きレンダリングで画面に見えない要素をなくす方法が効果的です。