브라우저는 HTML을 어떤 단계로 화면에 그리나요?

이렇게 답해 보세요 (핵심 답변)

브라우저는 서버에서 받은 HTML을 파싱해 DOM 트리를 만들고, CSS를 파싱해 CSSOM을 만든 뒤 둘을 결합해 화면에 표시될 노드의 스타일(Render Tree)을 계산합니다. 이어서 각 요소의 정확한 크기와 위치(기하 정보)를 계산하는 레이아웃(Layout)을 수행하고, 픽셀을 칠하는 페인트(Paint)와 여러 레이어를 합치는 합성(Composite) 단계를 거쳐 화면을 출력합니다. 이때 모든 단계가 매번 전체 문서에 대해 한 번만 끝나는 것이 아니라, 이미지·폰트 로딩이나 JavaScript의 DOM·스타일 조작에 따라 필요한 범위에서 부분적으로 다시 실행됩니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. DOM/CSSOM 생성, 레이아웃, 페인트, 합성을 구분해 이해하면 화면 버벅임이 계산 문제인지 레이아웃 비용인지 정확히 좁힐 수 있습니다.
2. 파싱 도중 일반 script 태그를 만나면 HTML 파싱이 멈출 수 있으므로 defer나 async 속성으로 로딩 경로를 제어하는 것이 중요합니다.

면접에서 자주 하는 실수

DOM 트리가 메모리에 생성된 시점과 실제 모니터에 픽셀이 그려진(Paint) 시점을 같은 순간으로 혼동해서는 안 됩니다.