1. DOM 트리 빌드
이전 단계에서 통신을 통해 받아온 html 파일들은 바이트 형태로 전달된다.
바이트 > 문자 > 토큰 > 노드 > 객체 모델로 전환하는 작업이 수행되고 최종 트리 형태의 DOM이 출력된다.
+ 만약 html 파싱 중 link 태그나 style 태그를 만날 경우 블로킹되어 CSSOM 생성으로 넘어간다.
2. CSSOM 트리 빌드
css 파일도 html 파일과 마찬가지로 트리 형태의 객체 모델로 전환하는 과정을 거친다. css 파싱이 완료되면 html 파싱이 중단된 시점으로 돌아가 다시 html을 파싱한다.
3. Render Tree 생성
기존에 제작된 DOM과 CSSOM을 결합하여 Render Tree를 생성한다.
+ 화면에 렌더링되는 노드만으로 구성된다. (display : none이나 meta 태그 등은 렌더트리를 구성하지 않음)
4. JS 파싱 후 AST 생성
html 파싱 중 js 즉, script 태그를 만나게 되면 blocking되어 제어권을 JS엔진에게 넘겨주어 JS 파싱으로 넘어간다.
소스코드를 토큰으로 분해하고 파싱해 AST라는 추상적 구문 트리로 생성한 뒤 인터프리터가 읽을 수 있도록 바이트코드를 생성하여 실행한다.
이후 js 파싱과 실행이 종료되면 렌더링 엔진으로 다시 제어권이 넘어가 html 파싱이 중단된 시점부터 다시 시작하여 dom 생성을 재개한다.
5. Layout
Render Tree의 노드들의 위치와 크기를 계산하는 단계
6. Paint
계산된 값들을 기반으로 화면에 필요한 요소들을 실제로 그리는 작업을 실행한다.
7. Reflow & Repaint
아래 3가지의 경우와 같이 html 요소의 크기나 위치를 변경해야 하는 경우가 발생하면 렌더링 트리의 요소의 크기와 위치를 다시 계산하는 reflow 과정을 거쳐 다시 페인팅하는 repaint 가 발생한다.
+ 리렌더링 조건
1. 자바스크립트에 의한 노드 추가 또는 삭제
2. 브라우저 창 리사이징에 의한 뷰포트의 크기 변경
3. html 요소의 레이아웃에 변경을 발생시키는 width, height 등의 스타일 변경
++ Composition
레아아웃과 페인트를 수행하지 않고 레이어의 합성만 실행시키는 단계
Transform, opacity와 같은 요소들을 의미한다.
