1. 브러우저가 그려지는 원리와 Virtual DOM | Notion

웹 페이지 빌드 과정

Critical Render Path

렌더 엔진이 문서를 읽어들여서 그것들을 파싱하고 어떤 내용을 페이지에 렌더링 할 지 결정한다. (DOM 트리 생성)
DOM과 CSSOM을 결합하여 Render Tree를 만든다.
Layout (reflow) 브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산한다.
실제 화면에 그린다. (paint)
CRP의 문제

DOM에 변화가 발생하면 그 때마다 render tree가 재생성 된다. 즉, 모든 요소들의 스타일을 다시 계산하는 Layout과, repaint과정을 거친다.

Virtual DOM

가상 DOM이란 실제 DOM을 메모리에 복사해준 것이다.
변화 before DOM과 변화 after DOM을 비교하여 diff를 찾아주고(diffing하고), 바뀐 부분만 실제 DOM에 적용시켜준다. (재조정한다 === reconciliation한다.)
장점
- ex) 요소가 30개가 변하였더라도 가상 DOM덕분에 한번에 묶어서 1번만 DOM 수정을 처리할 수 있다. 따라서 DOM 조작 비용을 줄일 수 있다.