[온라인 쇼핑몰 속도 최적화] 과도한 DOM 크기 피하기

 

✍️  목 차

1. DOM이란?
2. 과도한 DOM 트리가 페이지 성능에 미치는 영향
3. 과도한 DOM 크기를 피하는 방법

 

 

 

DOM(Document Object Model)은 웹 페이지의 구조와 콘텐츠를 나타내는 트리 구조입니다. 이 트리 구조는 자바스크립트와 CSS를 이용하여 조작할 수 있습니다.
그러나 DOM 트리가 커지면 웹페이지 로딩 속도가 느려질 뿐만 아니라, CPU 사용량이 증가할 수도 있습니다. 
이러한 문제를 해결하기 위해 DOM 트리를 최적화하고, 불필요한 노드를 제거하며, HTML/CSS/자바스크립트를 최적화하여 DOM 크기를 최소화하는 방법을 제시합니다. 이를 통해 웹 페이지의 로딩 속도와 성능을 개선할 수 있습니다.
　

 

---

 

💡 DOM이란?

브라우저가 HTML 문서를 받으면, CSS와 JavaScript의 도움으로 렌더링 및 그림 그리기에 사용되는 트리와 유사한 구조로 변환해야 합니다.

이 '트리'와 같은 구조를 DOM 또는 문서 객체 모델이라고 합니다.

< 이미지출처 : Google 개발자>

▶ 노드 - DOM의 모든 HTML 요소를 노드라고 합니다. (나무에서의 "잎"으로도 알려져 있습니다).
▶ 깊이 - 나무에서 "가지"가 얼마나 멀리 뻗어있는지를 깊이라고 합니다. 예를 들어, 위의 다이어그램에서 "img" 태그의 깊이는 3입니다. (HTML -> body -> div -> img)
▶ 자식 요소 - 더 이상의 가지가 없는 노드의 모든 자식 노드들을 자식 요소라고 합니다.
　
　

---

 

💡 과도한 DOM 트리는 페이지 성능에 어떤 영향을 줍니까?

웹 페이지가 로드될 때마다 브라우저는 DOM(문서 개체 모델) 트리 구축을 시작하기 전에 HTML을 다운로드하고 구문 분석합니다.
이 DOM 트리에는 웹 페이지의 구조와 콘텐츠를 구성하는 모든 HTML 요소가 포함되어 있습니다.

과도한 DOM 트리는 페이지 성능에 부정적인 영향을 줄 수 있습니다.

　
1. 로드 시간의 증가

DOM을 구성하는 데 걸리는 시간이 오래 걸려서 웹 페이지가 덜 로드될 수 있습니다.

2. 전송 지연

DOM은 페이지를 전송하는 데 더 많은 시간이 필요합니다. 이로 인해 페이지를 볼 때 전송 지연이 발생할 수 있으며, 스크롤이 부드럽지 않을 수 있습니다.

3. 메모리 사용

DOM은 많은 메모리를 사용하므로, 모바일 게임과 같은 환경에서 문제가 될 수 있습니다.

4. 유지 보수의 어려움

DOM이 손상되면 코드를 유지하기 어렵고 오류가 발생하기 쉬워집니다.

 

따라서 웹 페이지의 성능을 향상시키기 위해서는 DOM을 최적화하고 필요에 따라 HTML 요소를 뺄 수 있으며 AJAX나 DOM과 유사한 기술을 사용하여 페이지 업데이트를 최적화해야 합니다. 이를 통해 더 빠른 로딩 속도와 개선된 사용자 경험을 제공할 수 있습니다.

 

예를 들면 만약 한 페이지에 1,000개의 이미지가 있다고 가정해 봅시다. 각각의 이미지가 HTML에서 img 태그로 구현되어 있다면, 브라우저는 이를 1,000개의 노드로 인식하게 됩니다. 이는 DOM 트리의 크기를 상당히 늘리게 될 뿐만 아니라, 브라우저가 이를 로딩하는 데 많은 시간과 자원을 소모하게 됩니다.
　

 

---

 

 

💡과도한 DOM 크기를 피하는 방법은 무엇입니까?

　
1. 요소의 개수 최소화

불필요한 HTML 요소를 줄이고, 중복된 코드를 최대한 피해야 합니다. 예를 들어, 같은 스타일을 가진 여러 개의 요소가 있다면 하나의 클래스를 사용하여 스타일을 적용하는 것이 좋습니다.

2. DOM 트리의 깊이 감소

가능한 한 깊은 DOM 트리를 피해야 합니다. 깊은 트리는 요소에 접근하는 데 시간이 더 많이 소요될 수 있습니다. 예를 들어, 깊은 중첩을 피하고 필요한 경우에만 div와 같은 불필요한 컨테이너 요소를 사용해야 합니다.

3. 가상화(Virtualization) 사용

리스트나 테이블과 같은 반복 요소가 많을 경우, 모든 요소를 DOM에 렌더링하지 않고 보이는 부분만 렌더링하는 가상화 기술을 사용할 수 있습니다. 이로써 페이지 초기 로딩 속도를 개선할 수 있습니다.

4. 이벤트 위임(Event Delegation)

이벤트 핸들러를 최상위 요소에만 부여하고, 내부 요소의 이벤트는 상위 요소에서 처리할 수 있도록 하는 방식을 사용합니다. 이렇게 하면 많은 이벤트 핸들러를 생성하지 않아도 되어 DOM 크기를 줄일 수 있습니다.

5. 동적 요소 삽입 최소화

 JavaScript를 사용하여 동적으로 DOM을 조작할 때, 가능하면 한 번에 여러 요소를 추가하거나 수정하는 것이 좋습니다. 단일 작업으로 여러 변경을 수행하면 브라우저의 리플로우와 리페인트 비용을 줄일 수 있습니다.

6. 큰 이미지 및 미디어 최적화

큰 이미지를 사용하는 경우, 이미지 크기를 최적화하거나 Lazy Loading과 같은 기술을 사용하여 페이지 로딩 속도를 향상시킬 수 있습니다.

7. 자바스크립트 라이브러리 사용의 신중한 선택

필요하지 않은 기능을 갖춘 무거운 자바스크립트 라이브러리를 사용하지 않는 것이 좋습니다. 작은 규모의 라이브러리나 필요한 부분만 사용할 수 있는 라이브러리를 선택하는 것이 DOM 크기를 줄이는 데 도움이 됩니다.
　
웹페이지의 과도한 DOM 크기를 방지하는 방법에 대해 자세히 알아보려면 이 문서 를 읽어보세요 .
 

How to Reduce DOM Size in WordPress