lighthouse로 사이트의 성능을 측정해보면 과도한 DOM 크기를 지향 (Avoid an excessive DOM size) 하라는경고가 표시될 때가 있다.
DOM 크기가 크면
- 메모리 사용량 증가
- 화면에서 보여줄 스타일 계산에 많은 비용 발생
이러한 이유로 저성능 디바이스에서는 사용자 경험에 더욱 좋지 않다.
여기서 중요한 건, DOM 요소의 개수가 아니라 깊이!
동일한 요소의 수를 가지고 있는 A, B가 있을 때
// A
<body>
<h1>…</h1>
<section>…</section>
<img … />
<div>…</div>
</body>
// B
<body>
<section>
<div>
<h1>
<img… />
<h1>
</div>
</section>
</body>
Img 태그 요소에 접근하려면
A: body.children[2]
B: body.children[0].children[0].children[0],children[0]
요소의 수는 같지만 트리 구조가 같지 않아. 때문에, 트리가 깊어질수록 속도가 느려진다.
간단한 프로젝트에서는 별 차이가 없다. 트기의 깊이가 몇 백 개가 되어야 그때 속도 면에서 차이가 나타나는데 그래도 이런 내용을 모르고 있는 것보다 낫기 때문이다.
또, 스타일 요소가 많아지면 느려진다는 것인데
어떤 요소를 화면에 보여줄 때 위치와 기존 스타일에 스타일을 재계산해야 해서 로딩 속도가 느려질 수 있다.
이런 문제들을 해결하려면 주기적으로 DOM에 대해 주시하는 것뿐인데 특히 크기와 깊이를 중점적으로 확인해야 한다.
lighthout에서 pageSpeed insights (https://pagespeed.web.dev/) 같은 도구를 사용해 DOM 크기와 깊이를 측정할 수 있다.
또, document.querySelectorAll(‘*’).length
이 코드를 이용하면 특정 시간에 페이지에 얼마나 많은 요소가 있는지 확인 가능하다.
'TECH' 카테고리의 다른 글
| Vite+ (0) | 2025.11.19 |
|---|---|
| 🧠 Stack Overflow의 사용 통계 변화 (2008–2025) (0) | 2025.10.28 |
| Playwright / MSW 🧪 (1) | 2025.09.08 |
| rebase ↹ (0) | 2025.09.05 |
| Tailwind CSS 🪮 (1) | 2025.09.03 |
