가상 DOM(Virtual DOM)은 무엇인가? 가상 DOM은 실제 DOM보다 빠른가?

가상 DOM(Virtual DOM)은 무엇인가?  가상 DOM은 실제 DOM보다 빠른가?

DOM이란?

The Document Object Model

HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

// DOM을 조작하여 [id="test"]인 요소를 찾아 새로운 HTML 값으로 렌더링
document.querySelector('#test').innerHTML = 'TEST2';

Virtual DOM이란?

Virtual DOM(가상 DOM)은 진짜 DOM을 추상화한 개념으로, 실제 DOM의 가벼운 복제본이며, JavaScript 객체로 구성되어 있음.

 

실제 DOM의 복제본이기에 가상 DOM에는 모든 element와 속성 값을 갖고 있음. 그러나 실제 DOM으로 화면을 조작할 수 있는 것과 달리 가상 DOM은 그저 값이 들어가 있는 객체이기 때문에 화면 조작이 불가능 함.

 

가상 DOM을 쓰는 이유는 Diffing과 Batching을 통해 값의 상태가 변경되었을 때 가상 DOM에서 변화된 부분을 정확하고 빠르게 찾을 수 있기 때문임.

• Diffing: 이전 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 부분을 찾아냅니다.
• Batching: 변경된 부분을 한 번에 실제 DOM에 반영하기 위해 렌더링 작업을 배치합니다.

가상 DOM을 통해서 Diffing, Batching으로 어떤 부분이 변경되었는지 정확하고 빠르게 찾아내고 해당 변화된 부분의 실제 DOM을 조작하여 화면을 새롭게 그리는 작업을 진행하는 것.

 

가상 DOM이 빠르다고 이야기하지만 가상 DOM이 빠른 부분은 Diffing과 Batching이 효율적이기에 필요한 부분만 빠르게 실제 DOM을 찾아 그릴 수 있기 때문임.

 

화면을 그리는 부분이 빠른게 아니라 새롭게 변경된 가상 DOM과 이전 가상 DOM을 비교하는 과정을 통해 효율적인 DOM 렌더링이 가능한 것.

 

가상 DOM의 핵심을 `Diffing` 과 `Batching`으로 빠르게 상태가 바뀐 요소를 찾는 것!

---

 

아래 글은 StackOverflow에서 어떻게 React의 가상 DOM이 실제 DOM보다 빠른지에 대해 기록한 글이다. 정확히 어떤 부분이 React의 가상 DOM이 실제 DOM보다 나은지 적혀있다.

 

How is React's Virtual DOM faster than DOM?

How is React's Virtual DOM faster than DOM?

 

Changing Virtual DOM should not be much different than changing the real DOM. The problem is in the aftermath: changes in real DOM trigger relayout and repaint, so the less we touch the real thing, the better.
One way to do template rendering is to render the template, then replace the whole container element with newly rendered template. This needs to recalculate everything that just appeared within the container, and everything affected by it. Basically, if the browser was your kitchen and your template container a fridge (and your image of the fridge as it would be in five minutes, your virtual DOM), and you bought a lemon, typical template render would throw out your fridge, imagine what the fridge with a lemon would look like, buy all the ingredients you had before and also a lemon, then fill the new fridge.
The thing that React and other similar frameworks do that speeds this up is the diff process, that finds the minimal set of changes to get the real DOM to reflect the virtual DOM, which can drastically reduce the number of recalculations the browser will need to do in order to paint it. In the previous analogy, you imagine what your fridge would be like after you bought a lemon (fridge with no lemon vs fridge with a lemon), figure out the minimal change (add the lemon) and perform it.
It so happens that throwing out a fridge every time you change anything in it is kind of expensive.
Note that Virtual DOM is not quicker than simply fetching one element via getElementById and changing it. The comparison is between two ways of dealing with changes in complex subtrees, not single elements.

 

여기서 비유에서는 레몬을 냉장고에 넣는 과정을 통해 실제 DOM과 가상 DOM의 차이를 설명해주고 있음.

 

실제 DOM은 레몬을 하나 추가할 때 냉장고의 안에 있는 내용물을 싹 버리고 같은 내용물과 레몬을 같이 넣어주는 작업을 하는거라면, 가상 DOM은 냉장고에서 레몬만 추가해서 넣는 작업을 한다고 보면 됨.

 

가상 DOM에서는 냉장고의 이전 상태와 이후 상태(레몬이 추가 된 상태)를 비교해서 레몬만 추가하면 된다는 것을 Diffing과 Batching 과정을 통해 확인하고 레몬 부분만 추가해서 넣게 되는 것.