[39장] DOM

** 39장의 모든 내용을 정리하지는 않고 간단하게 'DOM이 무엇인가?'에 대한 답변 정리 및 리플로우, 리페인트 개념과 최적화 내용 (책 + 다른 출처)

DOM

• Document Object Model의 약자
• HTML 문서의 계층 구조와 안에 담고 있는 정보를 표현하는 객체
• 내부 구조를 제어할 수 있는 DOM API를 제공
• 형태는 최상위 root 노드(document 노드)를 기준으로 내려오는 트리 자료구조

리플로우와 리페인트

Reflow

요소의 크기나 위치에 영향을 미치는 width, position 등 변경 시 발생

Repaint

크기나 위치에 영향을 미치지 않는 color, border-radius 등 변경 시 발생, Reflow가 일어나면 자동 발생

레이아웃을 변경 시키는 Reflow가 비용이 더 크므로
Reflow를 최적화시키는 방향으로 가야 함

Reflow 최적화 방법

요약: 가장 하위 노드의 클래스 변경 / 깊은 CSS 하위 선택자, 인라인 스타일 지양 / fragment 태그, display: none 활용 / 애니메이션 줄 때 position: fixed나 absolute (분리)

1. 가장 하위 노드의 클래스 변경

   • 상위 노드를 건드리면 하위 노드에 영향을 주기 때문

2. CSS 하위 선택자 최소화

   • CSS 하위 선택자가 많아지면 CSSOM 트리 깊이가 깊어져서 렌더 트리 생성 시간 증가
   • 권장: 선택하려는 노드와 해당 노드의 최상단 노드로 지정 (사이에 있는 노드를 선택자에 포함 시키지 않는다)

   /* Bad */
   .reflow_box .reflow_list li .btn {
     display: block;
   }
   
   /* Good */
   .reflow_list .btn {
     display: block;
   }

3. 인라인 스타일 지양

   • 인라인 스타일은 HTML을 파싱할 때 레이아웃에 영향을 줘서 추가 reflow를 발생시킴
   • 추가: HTML에 style 코드 포함 ⇒ 관심사의 분리가 안 됨, 유지 보수 곤란

4. 애니메이션 노드는 position: fixed나 absolute 설정

   • 해당 노드를 전체 노드에서 분리시킴

5. table을 레이아웃 용도로 사용 x

   • table은 내용이 모두 로드되고 너비까지 계산된 후에 화면에 그려짐 ⇒ 테이블의 작은 변화만 있어도 전체가 다시 그려짐
     

6. 변경할 노드를 display: none으로 숨긴 후에 변경

   • **display: none으로 숨긴 노드는** 변경 시 reflow가 발생하지 않음 ⇒ 노드를 숨겨서 변경 시킨 후에 화면에 나타내기
     

7. 여러 번 변경되는 요소들을 Fragment 노드에 한번에 추가 후 상위 노드에는 Fragment 노드만 추가

   • 실제 DOM을 1번만 건드릴 수 있도록

   const frag = document.**createDocumentFragment**();
   const ul = frag.appendChild(document.createElement('ul')); // ul을 만들어 frag에 추가
   
   for (let i = 1; i <= 3; i++) {
     li = ul.appendChild(document.createElement('li'));
     li.textContent = `item ${i}`;
   }
   
   document.body.appendChild(frag); // 최종 만들어진 ul(frag)을 실제 DOM에 추가