문득 **[프레임워크 없는 프론트엔드 개발]**이라는 책을 읽으면서 가상 돔에 대해서 정리하고자 한다.

• 리액트에 의해 가상 DOM의 개념은 선언적 렌더링 엔진의 성능을 개선시키는 방법이 되었다.
• 출력된 UI는 메모리에 유지되고, 실제 DOM과 동기화 되며, 가능한 적은 작업을 수행하고 이를 **'조정'**이라고 부른다
• 가상 DOM의 핵심은 diff 알고리즘(실제 DOM을 문서에서 분리된 새로운 DOM 요소의 사본으로 바꾸는 가장 빠른 방법을 찾아내는 알고리즘)

DOM

• DOM은 브라우저 상에서 자바스크립트가 HTML 문서를 조작하기 위한 API

• 브라우저가 렌더링할 때의 과정

  

렌더링의 동작 과정

1. Dom Tree 구축 위한 HTML 파싱

: 브라우저가 서버로부터 HTML을 전달받으면, 렌더링 엔진이 HTML을 파싱(구문 분석)하고, DOM의 Node로 이루어진 트리를 만든다.

2. Render Tree 구축

: CSS파일과 각 엘리먼트의 inline 스타일을 파싱하고 CSSOM(CSS Object Model)을 생성한다.

3. Render Tree 배치

: 생성된 Render Tree의 각 Node들이 스크린상의 좌표와 크기 등이 결정된다.

4. Render Tree 그리기

: 구성된 레이아웃을 화면에 그리는 과정이 진행되고 트리의 각 노드들을 거쳐가면서 화면이 스크린에 나타난다. DOM을 임의적으로 조작하면 이 과정을 반복하게 된다.