1. DOM 생성
브라우저가 HTML 파일을 바이트 단위로 읽기 시작
Parser로 바이트를 Character로 변환하고 HTML 토큰으로 변환하며 해석함
생성된 HTML 토큰을 기반으로 DOM 트리 생성
2. CSSOM 생성
CSS파일을 파싱
문자로 변환 후 CSS 규칙으로 나눔 → 선택자(Selector)와 선언(Declaration)으로 구성. 선택자는 스타일을 적용할 HTML 요소를 정의하고, 선언은 적용할 스타일을 정의함
규칙을 기반으로 CSSOM 트리를 생성
3. 렌더 트리 생성
DOM과 CSSOM을 결합해 렌더 트리를 생성함
화면에 실제로 표시될 요소들로만 구성됨 ex) display:none 은 포함되지 않
각 노드는 DOM 트리의 요소와 연결되며, CSSOM 트리에서 해당 요소에 적용된 스타일 정보를 포함함
4. 레이아웃
렌더트리가 생성된 후, 브라우저는 트리를 사용해 각 요소의 정확한 위치와 크기를 계산함
각 노드가 화면의 어디에 위치하는지, 또 얼마나 큰 지를 계산하게 됨
각 계산은 화면의 뷰포트 크기와 같은 정보에 의존함. 크기가 변경되면 reflow 발생 가능
5. 페인팅
레이아웃 완료시, 각 요소를 화면에 실제로 그리는 작업을 수행함
텍스트, 색상, 그림자, 이미지 등 시작적 요소가 화면에 그려짐
그리팩이나, 애니메이션이 많은 경우 성능 저하 가능
6. 컴포지팅
화면에 그려질 요소들을 레이어로 분리하고, 레이어들을 결합해 최종 화면을 구성함
GPU를 사용해 각 레이어를 신속하게 합성함
transform과 opacity와 같은 속성은 레이아웃 및 페인트 과정을 거치지 않고 컴포지팅 단계에서만 처리됨
이러한 속성을 사용하는 애니메이션은 더 부드럽고 신속하게 처리 가능
