[DOM] 브라우저 렌더링 과정 및 Virtual DOM(가상 돔)

1. 브라우저 렌더링 과정

1) DOM(Document Object Model) tree 생성: 렌더 엔진이 HTML을 파싱하여 DOM 노드로 이루어진 트리 생성.

2) render tree 생성: css 파일과 inline 스타일을 파싱. DOM과 CSSOM을 합친 렌더 트리를 생성.

3) Layout(reflow): 각 노드들의 스크린에서의 좌표에 따라 위치 결정. position이나 size 등도 해당 단계에서 계산.

4) Paint(repaint): 실제 화면에 출력.

위 과정에서 웹 페이지에 어떠한 변화가 발생했을 때, 2번 과정부터 다시 재진행 된다. 즉, 렌더 트리가 재생성 되고 이후의 과정이 다시 반복되며 화면에 UI 재출력이 되는 것이다.

 

2. Virtual DOM

1) Virtual DOM이란?

SPA(Single Page Application)는 브라우저단에서 자바스크립트가 관리한다. 이를 효율적으로 관리하기 위해 Virtual DOM이 등장했으며, Virtual DOM은 DOM의 복사본 혹은 HTML DOM의 추상화 버전이라고 표현할 수 있다.

2) Virtual DOM의 동작 원리

실제 DOM의 object와 같은 '속성'들을 가지고 있지만, 실제 DOM이 갖고 있는 'api'는 갖고 있지 않는데, 이를 통해 Virtual DOM에 변경 사항이 반영되면 원본 DOM에 필요한 변화만 반영하여 필요한 UI의 업데이트 적용이 가능하다. 이것이 가능한 이유는 Virtual DOM은 HTML 객체가 아닌 자바스크립트 객체(자바스크립트를 기반으로 하는 객체)를 활용하고 있기 때문에 가능한 것이다.

3) Virtual DOM의 이점

- 실제 DOM이 아닌 메모리 상에서 동작하기 때문에 더 빠르게 동작한다.

- Virtual DOM tree는 변화에 일일이 실제 렌더링이 되지 않고, 모든 변화를 하나로 묶어서 딱 한 번만 실행시키기 때문에 연산 비용이 최소화된다.

- 하지만 무조건 Virtual DOM이 빠른 것은 아니다. 정보 제공만 하는 웹 페이지라면 인터랙션이 발생하지 않기 때문에 일반 DOM의 성능이 더 좋을 수도 있다는 점을 명심하며, 용도에 알맞은 방식을 잘 고려하여 선정하는 것이 제일 중요하다.

종합적으로 말하면 Virtual DOM은 DOM fragment의 변화를 묶어서 적용한 다음, 기존 DOM에 던져주는 과정을 수행하고 이를 자동화 및 추상화 해놓은 것이다.

 

3. 참고 영상

https://www.youtube.com/watch?v=PN_WmsgbQCo