웹 성능을 개선하는 데 있어 중요한 요소 중 하나는 바로 DOM의 깊이입니다. DOM(Document Object Model)이란 HTML 문서의 구조를 트리 형태로 표현한 것을 말합니다. 이 DOM의 깊이가 깊어질수록 웹 페이지의 성능에 영향을 미칠 수 있습니다. 이번 글에서는 DOM 깊이가 웹 성능에 미치는 영향과 이를 최적화하는 방법에 대해 알아보겠습니다.
DOM의 깊이와 성능의 관계
Lighthouse로 사이트의 성능을 측정할 때 “과도한 DOM 크기 지양하기”라는 경고를 보신 적이 있으실 겁니다. 이는 DOM 크기가 크면 메모리 사용량이 증가하고 스타일 계산에 많은 비용이 발생할 수 있기 때문에 발생하는 경고입니다. DOM이 깊어질수록 요소에 접근하는 데 더 많은 연산이 필요할 수 있기 때문에, 이는 사용자 경험에 큰 영향을 미칠 수 있습니다.
예를 들어, 트리의 루트에서 특정 요소에 접근하는 상황을 생각해보겠습니다. 얕은 DOM 트리의 경우 두 번의 작업만으로 요소에 접근할 수 있습니다. 그러나 깊은 트리에서는 같은 요소에 도달하기 위해 여섯 번의 작업이 필요합니다. 이처럼 DOM 깊이는 페이지의 성능에 중요한 영향을 미칩니다.
실험으로 알아본 DOM 깊이의 영향
실제로 DOM 깊이가 성능에 어떤 영향을 미치는지 알아보기 위해 간단한 실험을 진행했보겠습니다. 두 개의 HTML 페이지를 만들었는데, 하나는 모든 `div`가 `body`에 직접 포함된 얕은 요소 트리이고, 다른 하나는 `div`가 중첩된 깊은 요소 트리입니다.
얕은 요소 트리
<html>
<body>
<div></div>
<div></div>
<div></div>
<!-- 97개의 div 생략 -->
<div>마지막 100번째 div.</div>
</body>
</html>깊은 요소 트리
<html>
<body>
<div>
<div>
<!-- 97개의 div 생략 -->
<div>마지막 100번째 div.</div>
</div>
</div>
</body>
</html>실험 결과, 얕은 트리의 페이지 로드 시간은 51밀리초, 깊은 트리의 페이지 로드 시간은 53밀리초로 측정되었습니다. 깊은 트리의 경우 시간이 약간 더 걸렸지만, 이는 큰 차이는 아니었습니다. 그러나 요소의 수를 500개로 늘렸을 때, 얕은 트리의 로드 시간은 56밀리초, 깊은 트리의 로드 시간은 102밀리초로 차이가 더 크게 나타났습니다.
DOM 깊이 최적화 방법
1. DOM 크기와 깊이 주기적으로 확인하기
Lighthouse나 PageSpeed Insights와 같은 도구를 사용하여 사이트의 DOM 크기와 깊이를 측정할 수 있습니다. 또한 브라우저 콘솔에서 `document.querySelectorAll(“*”).length;`를 실행하여 페이지의 요소 수를 확인할 수 있습니다.
2. CSS 선택자의 범위와 복잡성 줄이기
CSS 선택자의 범위와 복잡성을 줄이면 브라우저가 타겟팅하려는 요소를 더 쉽게 찾을 수 있어 스타일 재계산을 훨씬 빠르게 수행할 수 있습니다.
3. 적절한 트리 구조 유지하기
트리 구조를 평평하게 유지하고 불필요한 중첩을 피하는 것이 중요합니다. 자주 사용하는 요소는 루트에 가깝게 배치하여 접근 속도를 높일 수 있습니다.
결론
최신 브라우저는 많은 수의 중첩된 DOM 트리도 빠르게 처리할 수 있습니다. 그러나 DOM 크기와 깊이가 성능에 미치는 영향은 여전히 중요합니다. 스타일 재계산과 결합될 경우 그 영향은 더 커질 수 있습니다. 따라서, DOM의 크기와 깊이를 최적화하여 사이트 성능을 개선하는 것이 필요합니다.
참고 자료: frontendatscale.com, “How Deep is Your DOM?”