[Vue.js] DOM과 가상DOM

■DOM(Document Object Model)

- 웹 페이지를 객체로 표현하는 모델.

 

 

 

■Dom은 어떻게 움직일까

 

Dom의 활동 흐름

1. 브라우저는 HTML Parser를 통해 HTML 태그를 파싱하여 돔 트리 를 구성한다.

 또한 브라우저는 스타일 시트에서 CSS Parser를 통해 Css를 파싱하여 스타일 규칙 을 만들어낸다.

2. 돔 트리와 스타일 규칙이 합쳐져 렌더 트리 를 만들어낸다.

 

그런데 DOM에는 수 천개의 노드들이 존재하고 이에 대한 수정을 필요로 한다면?

브라우저의 속도가 현저히 낮아질 것이다.

 

현재 웹 개발은 DOM의 변경에 맞추어 렌더링도 여러번 하는 구조이다. 즉 DOM에 변경사항이 생겨서 DOM을 조작해야 한다면 모든 과정이 비용이다.

이런 이슈를 해결하기 위해 가상 DOM이 등장했다.

 

■가상 DOM이란?

기존에는 화면의 변경사항이 생기면 직접 조작하여 브라우저에 반영하였다. 

<div id="main">
    <h1>Header</h1>
    <p>Description</p>
</div>

라는 HTML 문서가 있으면

document.getElementById('main').appendChild('<p>Hello World</p>'); ​

와 같이 main이라는 div 속성에 접근하여 변경한다.(DOM API를 사용하여 DOM을 변경)

 

 

가상 DOM은 자바스크립트 객체로 HTML을 표현한다.

// Pseudo-code of a DOM node represented as Javascript
​
Let domNode = {
  tag: 'div',
  attributes: { id: 'main' }
  children: [
      // where the h1 & the p's would go
  ]
};

즉

domNode.children.push('<p>Hello World</p>');

이와 같이 DOM을 변경한다.

이렇게 여러 상태를 변화하고 마지막에 진짜 DOM과 비교하여 바뀐 부분들을 한번에 적용하는 방법으로 DOM의 렌더링 횟수를 줄일 수 있게 된다.

sync(originalDomNode, domNode);

 

기존 DOM에서 10개의 변화가 생긴다면 10번(진짜 10번까진 안해도 되지만)의 렌더링을 하지만 가상 DOM은 한번에 렌더링이 가능하다.

 

★가상 DOM이 추상화했다는 개념은 기존에 DOM을 제어하던 DOM API를 직접 호출하지 않고 Vue, React 같은 프레임워크가 알아서 하도록 추상화했다는 의미이다.

 

 

 

■그 외 특징

 

• 0.1초마다 화면에 데이터가 변경된다면? Virtual DOM으로 0.5초씩 모아가지고 렌더링을 적게할 수 있을까? → 안된다. 동시에 변경되는 것에 한해서만 렌더링된다.

• React나 Vue등을 이용해서 Virtual DOM을 쓰면 무조건 빠른가? → 아니다. 똑같이 최적화를 해야한다. (슬라이드를 옮기거나 무한 스크롤등의 움직임이 있을 때는 Virtual DOM을 이용해서 반복 렌더링을 하지 않도록 해줘야한다.)

• Virtual DOM은 메모리에 존재한다. DOM에 준하는 무거운 객체(Virtual DOM)가 메모리에 상주(?)하고 있기 때문에 메모리의 사용이 많이 늘어날 수 밖에 없다. --> 메모리에 존재하므로 처음부터 다 렌더링을 하지만 속도가 빠름

• Virtual DOM을 조작하는 것도 엄청나게 많은 컴포넌트를 조작하게 된다면 오버헤드가 생기기 마련이다. Virtual DOM 제어가 DOM 직접 제어에 비해 상대적으로 비용이 적게 들 뿐이다.

출처: 

https://jeong-pro.tistory.com/210

Virtual DOM 동작 원리와 이해 (with 브라우저의 렌더링 과정)

kkodu.tistory.com/1

Vue.js : 새롭게 추가된 Virtual DOM

 

spoit.tistory.com/24

DOM과 가상DOM 쉽게 이해해 보기