브라우저 렌더링 과정

1.Parsing

브라우저의 렌더링 엔진은 HTML파일과 CSS파일을 파싱하여 각각 트리를 만듭니다. HTML 파일을 해석하여 DOM 트리를 구성하고, 파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM 트리 구성 작업도 함께 진행합니다.

(파싱 과정: 이진수를 문자 형태의 html로 변환 후 html 문서를 토큰화.
토큰화란 문법적 의미를 갖는 코드의 최소 단위로 코드들을 분해하는 것.
토큰을 다시 객체로 변환하여 node를 생성한다. node들은 dom을 구성하는 기본 요소로 트리 형태의 자료구조인 dom트리를 만든다.
즉, 바이트 -> 문자 -> 토큰 -> 노드 -> CSSOM)

2.Style

두 트리를 결합하여 렌더 트리를 만듭니다. Render 트리는 화면에 보여질 내용만 포함하기 때문에 display: none과 meta tag같은 화면에 보이지 않는 것들은 포함되지 않습니다.

3.layout
Render 트리를 화면에 어떻게 배치해야 하는지 노드의 정확한 위치와 크기를 계산합니다.

4.Paint
계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만듭니다.
마지막으로 Composite단계로, 레이어를 합성하여 실제 화면에 나타냅니다.

++
리플로우 : 레이아웃 계산 다시하는 것. 노드의 추가, 삭제 등 레이아웃에 영향을 주는 변경 시 실행
리페인트: 재결합된 렌더 트리를 기반으로 다시 페인트.