렌더링 파이프라인? 🤔
브라우저가 웹 페이지를 화면에 표시하기 위해 거치는 과정!
크게 6단계로 나눌 수 있다.
1. DOM 생성
브라우저가 HTML 파일을 받으면 바이트(byte) 단위로 읽기 시작. ➡️ 브라우저의 HTML 파서(Parser)가 바이트들을 문자(character)로 변환. ➡️ 문자들이 다시 HTML 토큰으로 변환. ➡️ DOM 트리 생성
🤷 HTML 토큰이란?
HTML 토큰들은 각각의 태그와 그 안에 포함된 텍스트, 속성 등을 의미한다.
👀 DOM 트리란?
DOM 트리는 HTML 문서의 구조를 트리 형태로 표현한 것으로, 각 태그가 노드가 되서 부모-자식 관계를 형성한다.
2. CSSOM 생성
브라우저는 CSS 파일을 파싱 ➡️ CSS 파일도 바이트로 전송, 브라우저가 이를 문자로 변환한 뒤 CSS 규칙으로 나눈다. ➡️ 각 CSS 규칙은 선택자(selector)와 선언(declaration)으로 구성 ➡️ 규칙들을 기반으로 CSSOM 트리를 생성.
👍 선택자란?
스타일을 적용할 HTML 요소를 정의
📣 선언이란?
적용할 스타일을 정의
3. 렌더 트리 생성
DOM과 CSSOM을 결합해서 렌더 트리를 생성 ➡️ 렌더 트리는 화면에 실제로 표시될 요소들로만 구성.
렌더 트리는 HTML 문서의 구조와 각 요소의 스타일 정보를 모두 포함한 트리
4. 레이아웃
렌더 트리가 생성된 후에 브라우저가 트리를 사용해서 각 요소의 정확한 위치와 크기를 계산하는 과정.
레이아웃 과정에서는 렌더 트리의 각 노드가 화면의 어디에 위치할고 얼마나 큰지를 계산. ➡️ 계산은 뷰포트(viewport) 크기와 같은 정보에 의존한다.
5. 페인팅
레이아웃이 완료되면 브라우저가 각 요소를 실제로 화면에 그리는 작업.
텍스트, 색상, 그림자 등 모든 시각적 요소가 화면에 그려진다.
6. 컴포지팅
브라우저는 화면에 그려질 요소들을 각각의 레이어로 분리하고 결합해서 최종 화면을 구성한다.
GPU를 활용해서 각 레이어를 빠르게 합성할 수 있다.
transform과 opacity와 같은 속성은 레이아웃이나 페인트 과정을 거치지 않고 컴포지팅 단계에서만 처리된다.
GPU 가속을 활용해서 성능을 최적화하고 화면에 최종적으로 표시되는 결과를 빠르게 생성하는데 중요한 역할.
