DOM이란?
HTML 문서의 엘리먼트들의 트리 구조다. HTML 문서를 수정할 수 있는 DOM API를 제공한다.
최상위 노드인 document부터 시작해서, html, body, ul 등 노드들을 갖는다.
모든 노드 객체는 Object, EventTarget, Node를 상속하고, 노드의 종류에 따라 Document, Elemet 등을 상속한다.
이를 통해 addEventListener, getElementById 등의 프로토타입 메소드, 프로퍼티를 사용할 수 있게 된다.
아래는 HTML 문서와 DOM 예시이다.
<html>
<head>
<title>지민</title>
</head>
<body>
<ul>
<li>안녕</li>
<li>헬로월드</li>
</ul>
</body>
</html>
문서 노드(Document Node)는 루트 노드로, 자바스크립트에서 window.document나 document로 참조한다.
요소 노드(Element Node)는 HTML 요소들을 가리킨다.
텍스트 노드(Text Node)는 트리의 리프 노드이다.
리액트의 Virtual DOM이란?
메모리에 가지고 있으면서 실제 DOM과 동기화하는데 이를 reconciliation이라 한다.
실제 DOM과 동기화?
UI에 변화가 생기면 먼저 Virtual DOM이 수정되고, Virtual DOM은 어떤 요소가 변했는지, 어떤 요소가 변하지 않았는지를 알고 있다가 DOM과 변화를 동기화한다.
브라우저의 웹페이지 렌더 과정
1. 브라우저는 HTML, CSS, JS 등 필요한 리소스를 서버에게 받는다.
2. HTML을 파싱하여 DOM을 만든다.
3. CSS를 파싱하여 CSSOM을 만든다.
4. DOM과 CSSOM을 결합하여 render tree를 만든다.
5. Render tree로 각 엘리먼트들의 위치와 크기를 계산(레이아웃)하고, 그를 화면에 페인팅한다.
Virtual DOM과 DOM이 동기화되면서 DOM이 변하게 되면 다시 렌더 트리를 만들고, 다시 위치 및 크기를 계산 후 페인팅한다.
엘리먼트의 위치와 크기를 다시 계산하는 것을 리플로우, 브라우저에 다시 페인팅하는 것을 리페인팅이라한다.
이 둘은 항상 함께 일어나지는 않는다. 리플로우는 레이아웃이 변했을 때만 수행된다. 레이아웃이 변하지 않으면 리페인팅만 수행한다.
레이아웃이 변한다는 것은 DOM에 노드가 추가/삭제 되거나, 윈도우 크기가 변경되거나, 엘리먼트의 크기가 변하는 것이다.
아무튼, 여러 번 DOM에 변화를 줘서 렌더 트리를 다시 만들고 리플로우, 리페인팅을 반복하는 것은 코스트가 많이 든다.
Virtual DOM은 여러 변화를 한꺼번에 DOM에 반영할 수 있게 해서 이러한 코스트를 줄인다.
'JAVASCRIPT' 카테고리의 다른 글
| Javascript 비교연산자 (0) | 2022.02.06 |
|---|---|
| Javascript Objects vs. Maps (0) | 2022.01.30 |
| 자바스크립트 Promise (0) | 2022.01.14 |
| 자바스크립트 가비지 콜렉션과 순환참조 (0) | 2021.12.10 |
| 자바스크립트 Execution Context (0) | 2021.12.08 |
