1. DOM 트리 구축
첫 단계는 HTML을 처리해 DOM 트리를 만드는 것이다. HTML을 분석하여 토큰화하고 트리를 생성하는 것을 목표로 한다.
HTML 토큰은 시작 및 종료 태그 그리고 속성 이름 및 값을 포함한다. 토큰화된 입력을 분석하여 DOM 트리를 만든다. DOM 트리는 태그간의 관계와 계층을 나타내며 태그가 많아질수록, DOM 트리를 만드는데 오랜 시간이 필요하다.
구문 분석기가 이미지 태그와 같은 논 블로킹 자원을 만나면 브라우저는 자원을 요청하고 분석을 계속 진행한다. 마찬가지로 CSS 파일을 만났을 때도 지속될 수 있다. 하지만 async 또는defer 같은 설정이 없는 script 태그는 랜더링을 막고 HTML 분석을 중지시킨다.
아래 첨부된 사진을 통해 구축 과정을 자세히 알아보자.
변환: 바이트를 문자 코드로 변환한다.- 응답받은 HTML 파일의 바이트를 읽어 인코딩(예, UTF-8)에 맞는 문자 코드로 변환한다.
토큰화: 문자코드를 토큰으로 변환한다.- 구분 분석을 통해 시작 및 종료 태그와 속성 및 속성 값을 유의미한 요소로 구별한다. 이 각 요소들을 토큰이라고 부른다.
렉싱: 토큰을 객체 구문으로 변환한다.- 속성 이름-속성 값으로 이루어진 토큰을 자바스크립트 객체로 변환한다.
구축: DOM 트리- HTML 토큰들로 DOM 트리를 만든다.
2. CSSOM 트리 구축
CSSOM 트리를 구축하는 과정은 DOM 트리를 생성하는 과정과 동일하다.
위 과정을 통해서 CSSOM 트리가 구축된다.
3. 렌더 트리 구축
DOM 트리와 CSSOM 트리가 만들어지면, 둘을 결합해 랜더 트리를 구축한다. 랜더 트리에는 페이지 렌더링에 필요한 노드만 포함시킨다. 즉 display: none 속성을 가지는 태그는 랜더 트리에 포함되지 않는 것이다.
4. 레이아웃 단계
- 뷰포트 내에서 각 요소들의 정확한 위치와 크기를 계산한다.
- 정확한 위치를 파악하기 위해서 루트 노드부터 순회한다.
- %로 크기를 지정한 경우, 레이아웃 단계를 거쳐 페인트 단계에서 측정 가능한 픽셀로 변환된다.
5. 페인트 단계
- 렌더 트리의 각 노드를 실제 픽셀로 변환한다.
- 픽셀로 변환된 결과는 개별 레이어로 관리된다.
- 각각의 모든 엘리먼트가 레이어가 되는 것은 아니다.
- 생성된 레이어들을 합성해서 브라우저에 표시한다.
6. 리플로우와 리페인트
- 리플로우와 리페인트 모두 처리 비용이 발생하지만 리플로우의 비용이 훨씬 높다.
- 리플로우가 발생하면 주변 요소(자식, 부모, 형제)에도 영향을 주기 때문이다.
- 리플로우와 리페인트는 화면 표현을 느리게해 UX에 안좋은 영향을 준다.
리플로우
요소가 추가되거나 수정이 필요할 때 렌더 트리를 업데이트하고 레이아웃 단계를 다시 수행하게 된다. 이 과정을 리플로우라고 부르며 아래와 같은 상황에서 발생한다.
리플로우가 일어나는 대표 속성 목록
position, width, height, margin, padding, border, border-width, font-size, font-weight, line-height, text-align, overflow
- HTML 요소가 추가될 때
- 기존 요소의 스타일 변경
- 브라우저 사이즈 변경
리페인트
리플로우는 변경사항을 반영하기 위해서 렌더 트리 업데이트 및 레이아웃 과정을 재수행하는 것이고, 이 결과를 브라우저에 표시하는 과정을 리페인트라고 부른다.
리페인트만 일어나는 대표 속성 목록
background, color, text-decoration, border-style, border-radius
항상 리플로우와 리페인트가 같이 일어나는 것은 아니고 레이아웃에 영향을 미치지 않는 단순 색상 변경은 리플로우 과정없이 리페인트만 수행한다.
