https://d2.naver.com/helloworld/59361
1. HTML 파싱
사용자가 브라우저를 통해 웹사이트에 접속하면, HTML, JS, CSS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버에서 응답받는다. 서버로부터 내려받으면 브라우저의 렌더링 엔진에서는 이를 파싱한다.
- 크롬은 블링크(Blink), 사파리는 웹킷(Webkit) 그리고 파이어폭스는 게코(Gecko)라는 렌더링 엔진을 사용
2. DOM, CSSDOM 트리생성 (렌더트리)
HTML 파싱을 진행하면서, DOM 트리, CSSOM 트리를 만들게 된다. 둘을 결합하여 렌더트리(렌더링을 위한 트리자료구조)를 만든다
2-1. CSS파싱
Link 태그를 만나 StyleSheet를 내려받게 될 경우 CSS 파싱을 통해 CSSOM 트리를 만들게 된다.
2-2. JS파싱
위 과정을 진행하면서 자바스크립트를 만나면, 렌더링 엔진이 자바스크립트엔진에게 제어권을 넘겨주고 JS를 파싱한다. 자바스크립트 런타임 환경에 컨트롤(수행권한)을 넘겨 결과 값을 받는다. 이 과정 중, DOM파싱은 중단된다. 이때 실행되는 JS는 DOM과 CSSCOM을 조작할 수 있다.(script실행시점이 중요)
3. 레이아웃계산
렌더트리를 기반으로 뷰포트 내에서 각 요소의 정확한 위치와 크기를 계산을 한다. 모든 상대적인 값은 화면에서 절대적인 값으로 변환
4. 페인팅(레스터화)
레이아웃 단계에서 모든 계산이 끝나면 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환.
5. 리플로우 & 리페인트
Reflow
생성된 DOM 노드의 레이아웃 수치(너 비, 높이, 위치 등) 변경 시 영향 받은 모든 노드의 수치를 재계산하여, 렌더 트리를 재생성하는 과정
- 새로운 HTML 요소가 추가
- position, width, height, margin, padding, border, border-width, font-size, font-weight, line-height, text-align, overflow
Repaint
Reflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 과정. Reflow가 이루어졌다고 항상 Repaint가 되는 것은 아니다. background-color, visibillty, outline 등 레이아웃 수치에 영향을 끼치지 않는 것은 Repaint 과정만 진행한다.
- background, color, text-decoration, border-style, border-radius
