DOMサイズ確認ツール
要素数、DOM深さ、親1つあたり最大子要素数を厳格なフロントエンド性能基準で確認します。
このツールについて
DOMツリーが大きすぎると、スタイル計算、レイアウト、ハイドレーション、操作応答が遅くなります。
長いリスト、非表示モーダル、大きなテーブル、入れ子wrapperを構造的に減らすべきか判断する時に役立ちます。
要素数
720
最大深さ
18
親1つあたり最大子要素数
42
状態
良好
結果
使い方
- 1
必要な値を入力するか、テキストを貼り付けます。
- 2
オプションや単位を目的に合わせて調整します。
- 3
表示された結果を確認し、必要な場所へコピーして使います。
機能
即時結果
値を入力するとブラウザ内で結果がすぐに更新されます。
ブラウザ内処理
入力値はサーバーへアップロードせず、端末内で処理されます。
シンプルな入力
繰り返し使いやすい入力欄と見やすい結果を用意しています。
無料で利用
登録やインストールなしでそのまま使えます。
主な用途
- ›LighthouseやブラウザーDevToolsで見たDOMサイズ数値を確認します。
- ›長いリストやテーブルにvirtualizationが必要か判断します。
- ›非表示UIの過剰レンダリングがINPを悪化させる前に見つけます。