Connor Clark
게시일: 2025년 10월 8일
DOM이 크면 스타일 계산 및 레이아웃 시간이 길어져 페이지 반응성에 영향을 미칠 수 있습니다. DOM이 크면 메모리 사용량도 늘어납니다.
깊은 DOM 트리는 그 자체로는 성능 문제가 아니지만 불필요한 요소 중첩을 사용하는 디자인 패턴의 증상입니다.
이 통계는 섀도우 루트 내를 포함한 전체 DOM을 고려합니다. 요소가 아닌 DOM 노드는 무시됩니다. 또한 <iframe> 콘텐츠를 무시합니다.
확인할 사항:
- 총 요소: 페이지의 DOM에 있는 전체 요소 수입니다.
- DOM 깊이: DOM 트리의 최대 깊이입니다.
- 하위 요소가 가장 많은 요소: 하위 요소가 가장 많은 요소입니다.
이 통계를 전달하는 방법
이 통계는 40ms를 초과하는 대규모 레이아웃 또는 스타일 재계산이 있는 경우에만 실패합니다.
- 대규모 레이아웃 업데이트에는 100개가 넘는 레이아웃 객체 (요소와 대략 동일)가 포함됩니다.
- 대규모 스타일 재계산은 300개가 넘는 요소에 영향을 미칩니다.
실패 시 성능 패널에서 이 통계는 프레임 차트에서 이러한 이벤트를 강조 표시합니다.
이러한 이벤트의 비용을 줄이려면 다음 단계를 따르세요.
- CSS 선택자의 비용을 측정하고 스타일 복잡성을 줄이는 방법을 알아보세요.
- 불필요한 중첩을 줄여 DOM의 깊이를 최소화합니다.
- Shadow DOM을 사용하려면 Web Components를 채택하세요. 이렇게 하면 DOM 크기는 줄지 않지만 스타일 재계산 비용은 줄어듭니다.
스택별 안내
이 통계는 다음 기술을 사용하는 페이지에 스택별 안내도 제공합니다.
Angular
큰 목록을 렌더링하는 경우 구성요소 개발자 키트 (CDK)로 가상 스크롤을 사용하세요.
React
- 페이지에서 많은 반복 요소를 렌더링하는 경우
react-window와 같은 '윈도윙' 라이브러리를 사용하여 생성된 DOM 노드의 수를 최소화해 보세요. shouldComponentUpdate,PureComponent또는React.memo를 사용하여 불필요한 재렌더링을 최소화합니다.Effect후크를 사용하여 런타임 성능을 개선하는 경우 특정 종속 항목이 변경될 때까지만 효과를 건너뛰어 보세요.