DOM 노드 수, 왜 성능에 이렇게 큰 영향을 줄까?
브라우저는 HTML을 파싱해 DOM 트리를 만들고, 여기에 CSS를 적용해 렌더 트리를 구성한 뒤 화면에 그립니다. 이 과정에서 노드 하나하나가 메모리를 차지하고, 스타일 재계산과 레이아웃(리플로우) 연산의 대상이 됩니다. 노드 수가 많아지면 자바스크립트로 스타일을 바꾸거나 요소를 추가·삭제할 때마다 브라우저가 다시 계산해야 하는 범위가 넓어져 눈에 띄게 느려집니다. 구글 라이트하우스는 DOM 노드 수 1,500개 이하를 권장하고, 3,000개를 넘으면 성능 경고를 표시합니다.
DOM 깊이(최대 중첩 단계)도 중요한 지표입니다. 중첩이 깊을수록 CSS 선택자 매칭과 이벤트 버블링 경로가 길어지고, 특정 스타일 변경이 상위·하위 노드에 영향을 미치는 범위도 커집니다. 라이트하우스는 최대 깊이 32단계 이하, 부모 노드당 자식 노드 60개 이하를 권장 기준으로 제시합니다.
이 계산기는 입력한 노드 수와 깊이를 기준으로 성능 등급과 대략적인 메모리 사용량을 추정합니다. 실제 성능은 CSS 복잡도, 자바스크립트 실행량, 기기 성능에 따라 달라지므로 절대적인 수치가 아닌 개선 방향을 잡는 참고 자료로 활용하세요. 노드 수가 많다면 가상 스크롤(virtual scroll)이나 페이지네이션, 불필요한 래퍼 요소 제거를 우선 검토해보는 것을 권장합니다.
자주 묻는 질문
구글 라이트하우스는 1,500개 이하를 권장하며, 3,000개를 넘으면 성능 저하가 뚜렷하게 나타날 수 있다고 경고합니다.
노드가 많을수록 스타일 재계산과 레이아웃(리플로우) 비용이 커지고, 메모리 사용량도 함께 증가해 렌더링과 스크립트 실행이 느려집니다.
가상 스크롤을 적용하거나 불필요한 래퍼 요소를 제거하고, 조건부 렌더링으로 화면에 보이지 않는 요소를 없애는 방법이 효과적입니다.