HTML 파싱 중에 일반 script 태그를 만나면 왜 화면 렌더링 진행이 지연되나요?

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

브라우저의 HTML 파서가 defer나 async가 없는 일반 외부 classic script 태그를 만나면, 기본적으로 DOM 트리 구축을 멈추고 스크립트 다운로드와 실행이 끝날 때까지 기다리기 때문입니다. 스크립트 안에 document.write()나 DOM을 직접 읽고 수정하는 코드가 있을 수 있어 파서가 임의로 뒷부분 HTML을 먼저 처리하기 어렵습니다. 게다가 자바스크립트 실행 자체가 메인 스레드를 오래 점유하면 스타일 계산, 레이아웃, 사용자 입력 반응까지 함께 밀리게 됩니다.

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

1. HTML 파서가 멈추더라도 브라우저의 프리로드 스캐너(Preload Scanner)는 뒤쪽의 이미지나 스크립트 경로를 미리 찾아 네트워크 다운로드를 요청해 둡니다.
2. 외부 스크립트에 defer나 type="module"을 사용해 파싱 후 실행으로 미루면 초기 화면 표시가 스크립트 다운로드에 막히는 현상을 줄일 수 있습니다.

면접에서 자주 하는 실수

defer, async, module 등 로딩 속성에 상관없이 모든 script 태그가 똑같이 HTML 파싱을 즉시 중단시킨다고 일반화하면 안 됩니다.