핵심 답변
1.HTML 파싱 → DOM 트리 구축
2.CSS 파싱 → CSSOM 트리 구축
3.JavaScript 실행 (HTML 중간에 스크립트가 있으면 파싱 중단)
4.DOM + CSSOM 조합 → 렌더 트리 구축 (
display: none 요소는 제외)5.뷰포트 기반 각 노드의 위치/크기 계산 → Layout(Reflow)
6.계산된 위치/크기로 화면에 그리기 → Paint
핵심 용어
📌 렌더 트리DOM과 CSSOM을 합쳐 실제 화면에 보이는 요소만 포함한 트리.
display: none처럼 공간을 차지하지 않는 요소는 포함되지 않습니다.📌 Layout(Reflow)렌더 트리의 각 노드가 화면에서 차지하는 정확한 위치와 크기를 계산하는 단계입니다.
📌 Paint계산된 위치/크기를 기반으로 실제 픽셀을 화면에 그리는 단계입니다.