먼저 브라우저의 렌더링 과정 일부를 살펴보자.
서버로부터 받은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 Tree 자료구조 형태(DOM)로 만든다.
그 과정에서 중간에 <script> 태그를 만나게 되면 HTML 문서 파싱을 멈추고 script를 다운받고 실행한다.
이 과정에서 두가지 문제가 발생한다.
스크립트를 다운받고 실행하는 동안 화면이 로딩되지 않고 멈춘다.
스크립트는 아직 파싱되지 않은 DOM요소에 접근할 수 없다.
https://imagedelivery.net/v7-TZByhOiJbNM9RaUdzSA/72743608-ec58-4e58-c303-4ccb93c0b100/public
이 문제 때문에 보통은 script 태그를 HTML 문서 끝 쪽에 배치한다. 하지만 이 방법은 완전한 해결책이 아니다.
script 태그를 만나면 다운로드부터 해야하기 때문에 HTML파일이 과도하게 크거나 네트워크 환경이 열악해서 다운로드가 늦어지는 경우, 화면은 다 로딩이 되었는데 요소들이 제대로 작동하지 않는 상황이 생길 수 있다.
이를 해결하기 위한 script 태그의 속성 async, defer 에 대해 알아보자.
async 속성은 script 파일을 병렬적으로 다운받게한다.
즉 HTML 문서가 파싱되는 동안 동시에 script를 다운받을 수 있다. 다운을 받은 즉시 HTML 파싱을 멈추고 script 코드를 실행한다.
이 또한 문제를 야기한다. script 코드가 아직 로딩되지 않은 DOM요소에 접근할 수 없다. 여러 개의 스크립트 파일을 다운받는다면 작성 순서와 상관없이 다운받는 순서대로 실행하기 때문에 스크립트가 작성된 순서대로 실행되는 것을 보장하지 않는다. 스크립트 사이에 의존성이 존재하는 경우 제대로 작동하지 않을 수 있다.
https://imagedelivery.net/v7-TZByhOiJbNM9RaUdzSA/9831bbee-4144-4d09-fc44-868fdd1aac00/public