Virtual DOM

등장 배경 

Virtual DOM을 이해하기 위해서는 브라우저가 동작하는 원리에 대해서 아는 것이 중요하다. 관련 자료는 밑에 첨부를 해두었으니, 한번 보고 오는 것도 나쁘지 않은 선택인 것 같다. 

 

https://sangcho.tistory.com/entry/ES5-Intro2-Browers-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC

ES5 .Intro(3) - Browser 동작 원리

HTML DOM은 HTML document의 구조와 같은 트리 구조로 이루어져 있다. DOM 내에 있는 요소에 접근을 하기 위해서는 찾고자 하는 요소가 어디에 있는 지 순회를 해야하는데, 탐색이 쉬운 트리구조는 사용성이 좋다. (단지 다른 구조에 비해 사용성이 좋을 뿐 빠르지는 않다)

 

전통적으로 사용되었던 MPA(Multi-page Application)에서 SPA(Single-page Application)으로 현대 모던 웹은 점차 변화하고 있는 시점과 맞물려, 오늘날의 DOM 트리는 매우 거대해지고 있는 상황이다.

 

SPA(Single-page Application)는 MPA(Multi-page Application)와 다르게 모든 리소스들이 애플리케이션 실행동안 한번 로드가 된다. 이후 이벤트가 발생되었을 때 (Server와 통신을 해야할 때는 AJAX를 이용함) 페이지를 그리는 작업을 모두 프론트 단에서 하기 때문에 DOM을 수시로 변경해달라는 요청이 많아질 수 밖에 없는, 그 요청을 계속적으로 받는 브라우저는 힘에 부칠 수 밖에 없는 문제가 생기고 만다.

 

브라우저는 요청이 오는대로 일을 하려고한다. 

노드가 1000개쯤 있는 DOM트리를 뒤져서 특정 노드를 찾아 이벤트를 수행하고 다시 CSS트리를 만들고 합치고, 화면에 스케치를 하고 색을 띄우는 이런 고역과도 같은 일을 계속 반복한다.(repaint) 만약 DOM 수정 요청이 100번 온다면 브라우저는 이과 같은 짓을 100번 하게 된다. 

 

이런 브라우저의 힘든 상황을 알고 나타난 이가 있으니 이가 바로 Virtual DOM(가상돔)이다. 

---

Virtual DOM

HTML의 DOM의 추상화 개념, HTML DOM의 간소화된 복사본

HTML DOM의 추상화된 돔..... HTML DOM의 간소화된 복사본이라고 Virtual DOM을 이해하기에서는 너무 추상적이다. 

 

그래서 다시 좀 전에 하던 이야기를 마저 하려한다.  

 

만약 100번이 DOM 요청 수정이 오면, Virtual DOM은 브라우저 대신 DOM 변경을 먼저 인지한다. 그리고 그 내용을 Virtual DOM에 반영을 한다. 이때는 아직 화면을 그리지는 않은 상황이다.

 

100번의 DOM 요청 수정을 다 반영한 Virtual DOM은 이때서야 브라우저에게 수정된 내용을 전달하여 그리게 한다. 이때 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영하게 한다.

 

브라우저가 100번을 그려야 했던 부분을 1번으로 단축해주니, 이 얼마나 고마운 녀석인가...

 

이러한 Virtual DOM의 역할은 버퍼가 하는 역할과 비슷한 구석이 있다. 브라우저의 DOM과 렌더링 사이에서 버퍼가 가득차면 내용을 전달해주는 브라우저의 마음에 짐을 조금 덜어주는 역할을 수행한다.

 

---