Javascript 속 Vitual Dom

Vitual Dom(가상돔이란?)

Youtube 동영상보기

Vitual Dom이 나오게 된 배경

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

Dom의 NodeType

ConstantValueDescription
Node.ELEMENT_NODE1An Element node such as

or

.

Node.TEXT_NODE3The actual Text of Element or Attr.
Node.PROCESSING_INSTRUCTION_NODE7A ProcessingInstruction of an XML document such as <?xml-stylesheet … ?> declaration.
Node.COMMENT_NODE8A Comment node.
Node.DOCUMENT_NODE9A Document node.
Node.DOCUMENT_TYPE_NODE10A DocumentType node e.g. <!DOCTYPE html> for HTML5 documents.
Node.DOCUMENT_FRAGMENT_NODE11A DocumentFragment node.
  • 위의 테이블과 같은 다양한 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에 변화가 일어나면 변화된 부분만 감지하여, 해당 부분만 변경해주는 개념 간단한 예시
Thanks for your reading, this article is provided by Martin If reproduced, please indicate the source:Martin(https://github.com/martinYounghoonKim
VueJS란 무엇인가?
Vuex란 무엇인가?