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

브라우저는 HTML, CSS, JavaScript 파일을 화면에 보이는 픽셀로 변환하기 위해 ‘브라우저 렌더링 파이프라인’이라는 명확한 단계를 거친다.
이 과정은 DOM 및 CSSOM 트리 생성, 렌더 트리 구축, 레이아웃, 페인트, 그리고 컴포지팅의 순서로 진행되며, 각 단계는 웹 페이지 성능에 직접적인 영향을 미친다.

CRP(Critical Rendering Path, 중요 렌더링 경로)

단계	입력	처리 내용	출력	비유
파싱 (Parsing)	HTML, CSS 파일	텍스트 코드를 브라우저가 이해할 수 있는 자료 구조로 변환	DOM 트리, CSSOM 트리	요리 레시피(텍스트)를 읽고 필요한 재료 목록(구조)을 만드는 과정
렌더 트리 (Render Tree) 생성	DOM 트리, CSSOM 트리	화면에 표시될 노드들만으로 구성된 새로운 트리 생성	렌더 트리	재료 목록에서 실제로 요리에 사용할 재료만 골라내는 과정
레이아웃 (Layout/Reflow)	렌더 트리	각 노드가 화면의 어디에, 어떤 크기로 위치할지 계산	박스 모델 정보	재료를 도마 위에 어떻게 배치하고 자를지 구상하는 과정
페인트 (Paint)	렌더 트리, 박스 모델 정보	레이아웃 단계에서 계산된 정보를 바탕으로 각 노드를 픽셀로 변환	레이어(Layers)	구상한 대로 재료를 자르고 굽고 볶는 실제 요리 과정
컴포지팅 (Compositing)	레이어	여러 개의 레이어를 순서대로 화면에 합성	최종 화면 (픽셀)	완성된 요리들을 접시에 순서대로 예쁘게 담아내는 과정