웹 기술 기초
브라우저가 첫 화면을 표시하기까지의 처리(중요 렌더링 경로)에서는 <head> 안에 속성 없이 쓴 <script src="app.js">가 있으면 HTML 파싱이 거기서 멈춘다. 이 요소에 defer 속성을 붙였을 때의 동작으로 올바른 것은?
- A다운로드가 끝나는 대로 HTML 파싱을 멈추고 즉시 실행되며, 여러 스크립트의 실행 순서는 보장되지 않는다
- B다운로드도 실행도 되지 않고, 이용자가 페이지를 조작했을 때 비로소 읽어 들여진다
- CHTML 파싱과 병행하여 다운로드되고, 파싱이 끝난 후에 문서에 쓰인 순서대로 실행된다
정답과 해설 보기
정답: C. HTML 파싱과 병행하여 다운로드되고, 파싱이 끝난 후에 문서에 쓰인 순서대로 실행된다
브라우저는 HTML을 파싱하여 DOM을, CSS를 파싱하여 CSSOM을 만들고, 둘을 합쳐 그릴 내용을 정한 뒤, 요소의 위치와 크기를 계산(레이아웃)하고 나서 그립니다(페인트). 속성이 없는 script 요소는 DOM을 바꿔 쓸 가능성이 있으므로, 다운로드와 실행이 끝날 때까지 HTML 파싱을 멈춥니다. defer를 붙이면 다운로드는 파싱과 병행하여 진행되고, 실행은 파싱 후에 문서에 쓰인 순서대로 이루어집니다. async에서는 다운로드가 끝나는 대로 실행되므로 순서가 보장되지 않습니다.