브라우저가 HTML, CSS, JS를 받아 화면을 렌더링하는 과정(Critical Rendering Path)을 설명해주세요.

브라우저가 화면을 그리는 과정을 저는 읽고, 합치고, 배치하고, 칠한다로 이해합니다. HTML을 읽어 구조를 만들고, CSS를 읽어 스타일을 만든 뒤, 둘을 합쳐 무엇을 어디에 어떻게 보일지 정하고, 마지막에 화면에 칠합니다. 중요한 건 왜 이 순서로 막히느냐입니다. 핵심 병목은 CSS와 JS가 이 흐름을 멈춰 세우는 자리입니다. 스타일이 정해지기 전엔 배치를 못 하고, JS가 중간에 끼면 그 위 과정이 멈춥니다. 그래서 화면이 늦게 뜨는 건 보통 처음 화면에 필요 없는 것까지 앞에서 다 기다리기 때문입니다. 학부 프로젝트에서 첫 화면이 느렸을 때, 당장 안 보이는 스크립트를 뒤로 미루고 핵심 스타일만 먼저 주자 체감이 크게 빨라졌습니다. 그래서 저는 이 과정을 외울 단계가 아니라, 무엇을 앞에서 안 기다리게 할지 정하는 지도로 씁니다.