VDOM

VDOM(Virutal DOM)에 대해서

DOM (Document Object Model)

어디에서?

react js나 vue js에서 처음 접하게 되었는데, DOM의 랜더링 성능 문제를 해결 하기 위하여 도입된 개념이라고 한다.

랜더링 성능 문제란 무엇인가?

먼저 DOM이 만들어 지는 과정, 즉 화면이 생성되는 과정을 알아보자

웹페이지 화면이 만들이 지는 과정 (Rendering)

1. 브라우저는 html파일을 읽어 DOM트리를 생성하고 (DOM Tree),

2. css파일을 읽어 css트리를 생성한 후 (CSSOM Tree)

3. 두 트리를 조합하여 랜더 트리를 만들고 (Render Tree)

4. 화면에 그립니다.(Paint)

과거에는 정적인 웹페이지가 많았지만, js의 발달과 jquery의 등장과 함께 좀더 다이나믹한 화면을 구성할 수 있게 되었다.

이에 따라 동적인 음직임을 나타낼 수는 있었지만, 과도한 화면 동작은 DOM트리를 매번 다시 그리게 하는 부담이 생겼다.

DOM을 다시 그리게 하는 코드로 예를 들면..

$(“#div”).append 와 같은 html태그에 삽입하는 코드가 있다.

reflow, repaint

dom의 구조가 변화하면, 브라우저는 화면을 나타내기 위해 다시 계산하고 (reflow), 다시 그립니다. (repaint)

jquery는 편리하나 html엘리멘트를 대량 편집하기에는 이슈가 있었고…SPA를 만들기에는 한계를 보였다.

(서비스 레벨에 따라 다르겠지만..)

VDOM의 문제 해결

화면의 변화가 일어날 때 기존의 DOM은 랜더링을 계속해서 다시 실행해야 했다.
엘리멘트를 100개 추가 하면 그만큼 부하가 발생한다.

(경험담 - 입력한 전화번호를 화면에 계속 추가하는 로직을 jquery로 구현한 적이 있고, 역시 화면이 멈추게 되었다.)

VDOM은 html요소가 변화할 때마다 반영하지 않고, 내부적으로 가상돔(VDOM)을 이용하여
변화가 필요한 부분만 랜더링하여, 최종 결과만 DOM에 반영하는 것이다.