DOM
DOM(Document Object Model)은 HTML이나 XML같은 문서 구조를 객체로 표현한 모델로 트리형태로 이루어져있다.
DOM은 웹 페이지의 구조와 내용을 조작할 수 있도록 자바스크립트 같은 언어에서 접근하고 수정할 수 있게 한다.
DOM을 사용하는 이유
HTML은 원래 정적인 문서를 작성하기 위해 설계되어서 동적인 컨텐츠를 처리하는데 한계가 있다. 그래서 이러한 한계를 극복하고 동적인 웹을 만들기 위해 DOM을 사용한다.
Virtual DOM의 등장 배경
페이스북,유튜브 같은 규모가 큰 웹 브라우저에서 DOM의 변화가 일어났을 때 웹 브라우저에서 렌더링을 해야한다. 느려질 수 있다는 것이다.
렌더링 과정
1. DOM,CSSOM 트리 생성
2. DOM,CSSOM 트리를 가지고 렌더링에 필요한 노드만 선택하여 Render트리 생성
3. Layout: Render 트리를 바탕으로 웹에 그려질 노드의 스타일이나 위치를 계산
4. paint: 트리의 각 노드를 픽셀로 변환(실제로 그리는 과정)
DOM이 변경될 때마다 이러한 렌더링 과정을 거쳐야하기 때문에 시간이 낭비가 된다.
그래서 이를 해결하기 위해 Virtual DOM을 사용한다.
Virtual DOM
실제 DOM을 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. 실제로 렌더링하는 것이 아니기 때문에 DOM을 직접 업데이트하는 것보다 빠르다.
Virtaul DOM이 생성되면 현재 내용과 비교하여 바뀐 부분을 파악한다. 이 과정에서 Diffing알고리즘이 사용된다.
Diffing 이후에 변경사항을 실제 DOM에 적용하는 재조정(Recondiliation)과정을 수행한다.
여기서 Batch Update를 수행한다.
Batch Update란 변경사항이 10개라면 10번 업데이트를 하는 것이 아니라 변경사항을 한 개로 묶어서 처리하는 방식이다.
