HTML - HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유?

HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유?

자바스크립트가 DOM API 통해서 DOM 트리를 변경시킬 수 있기 때문

HTML 파서는 스크립트 태그를 만나게되면 렌더링 제어 권한을 자바스크립트 엔진으로 넘겨주고, 문서를 파싱하는 과정을 중단한다.
자바스크립트의 엔진의 권한이 끝나면 렌더링 과정으로 다시 돌아가서 중단된 시점부터 다시 파싱을 시작한다.
=> 때문에 스크립트 태그는 바디 끝네 위치하는 것을 권장
=> 바디 끝에 위치할 경우 HTML문서를 화면에 표시하는 속도가 빨라짐, 사용자가 뷰를 보는데 필요한 웬만한 문서를 해석한 상태이기 때문에 사용자 불편 감소

- 스크립트 파일을 먼저 로드할 경우?

스크립트가 파싱되는 동안 HTML, CSS같은 다른 브라우저 문서 작업을 수행할 수 없기 때문에 화면의 레이아웃이 제대로 구성되지 않은 뷰를 사용자에게 보여줌
=> 사용자 경험 감소

- 브라우저 렌더링 과정

DOM 트리 → CSSOM 트리 → 렌더트리 → 레이아웃 → 페인트

HTML 파싱 블로킹 현상을 해결하기 위한 async, defer

HTML 파싱 블로킹 현상을 해결하기 위한 async, defer가 HTML5부터 추가됨
이는 HTML 파싱과 외부 JavaScript 파일 로드가 비동기적으로 동시게 진행되도록 만들어준다!!