브라우저 렌더링 파이프라인

브라우저가 웹 페이지를 화면에 표시하기 위해 거치는 과정

1. DOM 생성
   브라우저가 HTML 파일을 받으면, 바이트(byte) 단위로 읽음
   브라우저의 HTML 파서는 이 바이트들을 문자로 변환, 문자들을 다시 HTML 토큰으로 변환
   이 HTML 토큰들을 각각의 태그와 텍스트, 속성 등을 의미
   HTML 토큰 생성 후 브라우저는 이를 기반으로 DOM 트리 생성
   DOM 트리는 HTML 문서의 구조를 트리 형태로 표현
   각 태그가 노드가 있어 부모-자식 관계를 형성
   ex- body 태그 아래 div가 있으면 DOM 트리에서도 body 노드 아래 div 노드가 있음

2. CSSOM 생성
   브라우저는 CSS 파일을 파싱
   CSS 파일 역시 바이트로 전송, 이를 문자로 변환한 뒤, CSS 규칙으로 나눔
   CSS 규칙은 선택자(seletor)와 선언(declaration)으로 구성됨
   선택자는 스타일을 적용할 HTML 요소를 정의, 선언은 적용할 스타일을 정의
   브라우저는 이 CSS 규칙을 기반으로 CSSOM 트리 생성
   DOM과 유사한 트리 구조, 각 노드는 해당 노드에 적용될 스타일 정보 포함

3. 렌더 트리 생성
   DOM과 CSSOM을 결합하여 렌더 트리 생성
   화면에 실제로 표시될 요소들로만 구성
   ex-display:none 속성이 있는 요소는 렌더 트리에 미포함(실제 화면에 그려질 요소만)
   렌더 트리의 각 노드는 DOM트리 요소와 연결, CSSOM트리에서 해당 요소에 적용된 스타일 정보 포함
   즉, HTML문서의 구조와 각 요소의 스타일 정보 모두 포함한 트리

4. 레이아웃
   렌더 트리 생성 후, 브라우저는 이 트리를 사용해 각 요소의 위치와 크기 계산 = 레이아웃
   이 계산은 화면의 뷰포트 크기와 같은 정보에 의존
   ex-화면 크기 변경되면 브라우저는 레이아웃 과정 다시 수행 = 리플로우
   성능에 영향을 줄 수 있어 최소화하는 것이 중요

5. 페인팅
   레이아웃 완료 후, 브라우저는 각 요소를 실제로 화면에 그리는 작업 시작 = 페인팅
   텍스트,색상,그림자, 이미지 등 모든 시각적 요소가 화면에 그려짐
   그래픽 요소를 생성하는 과정이여서 성능에 영향을 줌
   복잡한 그래픽이나 애니메이션이 포함되면 페인트 작업이 많아져 성능 저하

6. 컴포지팅
   브라우저는 화면에 그려질 요소들을 각각의 레이어로 분리, 결합하여 최종 화면 구성
   GPU 활용하여 각 레이어를 빠르게 합성
   transform, opacity와 같은 속성은 레이아웃이나 페인트 과정 거치지 않고, 이 컴포지팅 단계에서만 처리
   이 속성을 사용한 애니메이션은 더 부드럽고 빠르게 실행
   컴포지팅 단계는 GPU 가속을 활용하여 성능 최적화, 화면에 최종적 표시되는 결과를 빠르게 생성하는데 주요 역할함