Javascript 속 Vitual Dom

Vitual Dom(가상돔이란?)

Youtube 동영상보기

Vitual Dom이 나오게 된 배경

• Dom이란 Document Object Model의 약자로서 구조화된 nodes와 property 그리고 method를 갖고 object로 문서를 표현 Dom의 methods와 property
• 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

Dom의 NodeType

• 원문 보러가기

• 위의 테이블과 같은 다양한 Dom NodeType이 존재하며, 이러한 NodeType은 Dom의 고유한 property

1
2
3
4
5
6
7
8
9
10
11
12
13

let domTree = `<div id="obj">
<div id="children1">children dom</div>
<div id="children2">children dom</div>
</div>`;
document.write(domTree);
let obj = document.getElementById('obj');
let children1 = document.getElementById('children1');
let children2 = document.getElementById('children2');

// 위의 코드를 실행한 후, 아래의 log를 하나씩 실행
console.log(children1.nodeType);
console.log(children1.nextSibling.nodeType);
console.log(children1.nextSibling.nextSibling.nodeType);

• 이러한 Dom 노드 속에서 우리가 원하는 Node를 탐색하고 제어하는 것은 큰 비용이 든다.

• HTML, CSS를 브라우저에 전달
• 브라우저 엔진에서 각각을 파싱

• Dom tree와 CSS 규칙이 결합해 Render tree 를 형성

  Render tree 란 페이지를 랜더링하는 데 필요한 노드만 포함하며, 예를 들어 display: none,

  에 있는 내용은 포함하지 않는다.

• Reflow라는 Dom element의 좌표 등과 같은 레이아웃 배치 작업이 일어남

• Repainting 이라는 색을 입히는 과정이 일어나며 시각적인 작업이 일어남
• 유저에게 제공

이러한 성능을 개선하기 위해 Vitual Dom(가상돔) 이라는 개념이 나옴

• Dom의 추상화 개념으로 Real Dom의 복사본이라고 생각하면 쉬움
• Dom에 변화가 일어나면 변화된 부분만 감지하여, 해당 부분만 변경해주는 개념 간단한 예시