가상 돔은 정말 빠를까 ? 가상 돔이 필요한 이유 ?
Figure : WebKit main flow
브라우저의 동작 과정부터 다시 살펴보자.
HTML을 전달 받은 후 렌더 엔진이 이를 파싱하여 DOM Tree 생성
콘텐츠 트리 내부에서 태그를 DOM 노드로 변환한다
CSS 파일을 파싱하여 CSSOM Tree 생성
-
렌더링엔진: 요청받은 내용을 브라우저 화면에 표시하는 역할
- HTML 파싱 ⇒ 렌더 트리 구축 ⇒ 렌더 트리 배치 ⇒ 렌더 트리 그리기
렌더트리 생성
attach ⇒ 노트의 스타일 처리, 스타일 정보를 계산하여 객체 형태로 반환
각 요소의 스타일 계산 DOM 트리에 새로운 노드가 추가될 때마다 attach 메소드가 실행됨
레이아웃 (리플로우)
DOM 객체의 크기나 위치가 변경되었을 때, 다른 DOM 객체들의 위치와 크기와 함께 변경하는 것
노드들의 스크린 상 좌표 및 위치가 주어짐
Painting
렌더링 된 요소들에 색을 입힘
빈번한 돔 조작의 문제
DOM이 변화할 때마다 렌더 트리 재생성, 레이아웃, 페인팅 과정이 반복됨
여러분이 30개의 노드를 하나 하나 수정하면, 그 뜻은 30번의 (잠재적인) 레이아웃 재계산과 30번의 (잠재적인) 리렌더링을 초래한다는 것이죠.
regular DOM은 정적이다. DOM 요소의 빈번한 조작 및 변화가 많이 일어나는 동적 특징을 가지는 SPA 하에서는 성능 문제가 일어날 수 있다. repaint 와 reflow의 빈번한 발생으로 렌더링 시에 많은 자원을 소모하기 때문.
Virtual DOM
regular DOM의 추상화 개념을 활용한 가상 돔. 빈번한 리플로우, 리페인트 문제를 보완하고 dynamic UI를 만들기 위해 적합한 기능들이 내장되어 있어 SPA 하에서 최적의 성능을 발휘한다.
뷰에 변화가 있을 때 실제 돔에 적용하기 전에 리액트는 가상의 돔에 먼저 적용시키고, 실제 DOM과 비교하여 연산의 최종 결과를 묶어서 실제 DOM에 전달한다. 브라우저 내에서 발생하는 연산의 양을 줄일 수 있다. 가상 돔은 실제로 렌더링되지 않기 때문에 연산 비용도 적다.
V-dom은 DOM 조작의 탐색비용과 업데이트 비용을 줄인다. 또, DOM 관리 과정을 자동화, 추상화하여 성능을 개선한다. 가상 돔에서의 탐색 및 트리 비교 알고리즘 - O(n) 은 실제 DOM의 그것 - O(n^3) 보다 빠르다. DOM 관리를 Virtual DOM이 하도록 함으로써 컴포넌트가 돔 조작 요청 시에 다른 컴포넌트들과 상호작용 하지 않아도 되고, 정보를 공유할 필요가 없다.
-
v-dom의 Reconciliation
- 기존 인스턴스와 새 인스턴스를 비교
- 새로운 인스턴스로 V-dom의 component tree structure을 업데이트
- 실제로 변화한 부분만 실제 DOM에 업데이트
[참고]