DOM vs Virtual DOM

기존의 브라우저 렌더링 방식은

1. HTML파싱 -> DOM트리 생성
2. CSS파싱 -> CSSOM트리 생성
3. DOM트리와 CSSOM트리를 합쳐 렌더 트리 생성
4. 레이아웃
5. 페인트

의 순서로 이루어 집니다.

Virtual DOM은 DOM트리와 똑같은 구조로 생긴 JS-Object입니다.
DOM을 조작하는것이 아닌 Object를 먼저 조작합니다.
그리고 Virtual DOM과 DOM트리를 비교하고 변경이 필요한 부분만 한번에 변경합니다.