DOM 크기 점검 도구
요소 수, DOM 깊이, 한 부모의 최대 자식 수를 엄격한 프론트엔드 성능 기준으로 확인합니다.
이 도구에 대해
DOM 트리가 과하게 커지면 스타일 계산, 레이아웃, 하이드레이션, 인터랙션 반응성이 모두 느려질 수 있습니다.
긴 리스트, 숨겨진 모달, 큰 테이블, 중첩 wrapper를 구조적으로 줄여야 하는지 판단하는 데 유용합니다.
요소 수
720
최대 깊이
18
한 부모의 최대 자식 수
42
상태
좋음
결과
사용 방법
- 1
필요한 값을 입력하거나 텍스트를 붙여넣습니다.
- 2
옵션이나 단위를 원하는 방식으로 조정합니다.
- 3
표시된 결과를 확인하고 필요한 곳에 복사해 사용합니다.
기능
즉시 결과
값을 입력하면 결과가 브라우저에서 바로 업데이트됩니다.
브라우저 처리
입력값은 서버로 업로드하지 않고 기기 안에서 처리됩니다.
간단한 입력
반복 사용에 맞춘 명확한 입력 필드와 출력값을 제공합니다.
무료 사용
가입이나 설치 없이 바로 사용할 수 있습니다.
주요 사용 사례
- ›Lighthouse나 브라우저 DevTools에서 본 DOM 크기 수치를 검토합니다.
- ›긴 리스트나 테이블에 virtualization이 필요한지 판단합니다.
- ›숨겨진 UI가 과하게 렌더링되어 INP를 해치기 전에 잡아냅니다.