TIL - 20220912

 오늘은 모던 JavaScript 튜토리얼에서 defer, async 스크립트에 대해 공부했다. 작성한 질문은 다음과 같다.

 브라우저에서 HTML을 읽다가 스크립트를 만나면 DOM 생성을 중단하고 스크립트를 실행한다. 외부 스크립트 또한 마찬가지며 외부 스크립트를 모두 다운로드하고 난 후에야 남은 페이지를 처리할 수 있고 이러한 동작 방식은 두 가지 이슈가 일어날 수 있다.

1. 스크립트 아래에 있는 DOM 요소에 접근할 수 없다.
2. 페이지 상단에 용량이 큰 스크립트가 있는 경우 스크립트가 페이지를 막아버린다.

 이를 해결할 수 있는 script 속성이 defer와 async이다.

 

 브라우저에서 defer 속성이 있는 스크립트를 '백그라운드에서' 실행한다. 따라서 지연 스크립트를 하는 도중에도 HTML 파싱을 중단하지 않는다. 또한, defer 실행은 페이지 구성이 끝날 때까지 지연된다.

 

 브라우저에서 async 속성이 있는 스크립트를 만나면 페이지와 독립적으로 동작한다.

• defer와 마찬가지로 백그라운드에서 다운로드하지만 HTML 페이지는 async 스크립트의 다운을 기다리지 않고 페이지 내 콘텐츠가 출력된다. 또한 async 스크립트 실행 중에는 HTML 파싱이 멈춘다.
• DOMContentLoaded 이벤트와 async 스크립트는 서로를 기다리지 않는다.
• 다른 스크립트들은 async 스크립트를 기다리지 않고 async 스크립트 또한 다른 스크립트들을 기다리지 않는다.

 

 동적 스크립트는 기본적으로 async처럼 행동하며 다음과 같은 특징을 갖는다.

• 먼저 다운로드된 스크립트가 먼저 실행된다.
• 동적 스크립트는 그 어떤 것도, 그 어떤 것도 동적 스크립트를 기다리지 않는다.