[FE/Web] 브라우저 렌더링 과정

브라우저 렌더링 과정에 대해 말씀해주세요

1. DOM tree 생성
2. render tree 생성 (DOM + CSSOM)
3. Layout (reflow)
4. Paint (repaint)

렌더 엔진이 HTML을 파싱하여 DOM Tree를 생성합니다.
그리고 스타일 코드들을 파싱하여 CSSOM을 구성하고 DOM트리와 CSSOM을 결합하여 render 트리를 생성합니다.
그다음 이 랜더트리를 기반으로 Layout을 크기나 위치를 계산한후
구성된 레이아웃을 실제로 화면에 그리는 paint과정을 거쳐 렌더링이 완성됩니다.
하지만 특정 인터렉션에 의해 DOM에 변화가 발생하면 render Tree가 재생성되며 reflow, repaint가 발생합니다.

Reconciliation(재조정)

UI의 가상 모델을 메모리에 저장하고 ReactDom과 같은 라이브러리에 의해 실제 DOM과 동기화

참고: https://www.youtube.com/watch?v=PN_WmsgbQCo