답변
브라우저는 HTML과 CSS를 파싱해 화면에 표시되는 구조와 스타일을 계산한 뒤, 실제로 렌더링하는 과정을 거칩니다.
먼저 HTML을 파싱해 DOM 트리를 만들고, CSS를 파싱해 CSSOM 트리를 생성합니다.
이 두 트리를 결합해 렌더 트리를 구성한 뒤,
각 요소의 위치와 크기를 계산하는 레이아웃(Layout) 단계를 수행합니다.
이후 요소들을 픽셀로 칠하는 페인트(Paint) 과정을 거치고,
마지막으로 여러 레이어를 조합해 최종 화면을 그리는 합성(Composite) 단계를 수행합니다.
Q. HTML 파싱 중에 <script> 태그를 만나면 어떤 일이 일어나나요?
HTML을 파싱하는 도중 <script> 태그를 만나면,
로드된 JavaScript는 실행이 끝날 때까지 HTML 파싱을 멈춥니다.
이로 인해 렌더링이 지연될 수 있기 때문에, defer나 async 속성을 통해 스크립트를 비동기적으로 로드하여 최적화할 수 있습니다.
async: 스크립트를 HTML 파싱과 동시에 다운로드하며, 다운로드가 완료되면 HTML 파싱을 멈추고 즉시 스크립트를 실행합니다. 실행 순서가 중요하지 않은 독립적인 경우에 적합합니다.defer: 스크립트를 HTML 파싱과 동시에 다운로드하지만, HTML 파싱이 완료된 후 실행합니다. 스크립트 간 실행 순서가 중요하거나, DOM이 준비된 상태에서 실행돼야 하는 경우에 적합합니다.