기존 script 로드 방식

자바스크립트를 로드하는 기본적인 방법은 다음과 같다.

<script src="script.js">

기존 자바스립트는

이 단점을 극복하기 위해 나온것이 바로 async와 defer이다.

<script async src="script.js">
<script defer src="script.js">

사용 방법은 간단합니다. 그냥 async와 defer 속성을 넣어주면 됩니다.

기존 스크립트 방식은 해당 스크립트 태그를 만나면 파싱을 멈추고 스크립트를 다운한다고 하였는데, 위 속성을 넣으면 파싱을 멈추지 않고 계속 나아가는 동시에 스크립트를 다운로드 합니다.

async

• async 스크립트 로드 방식에서는 브라우저가 해당 스크립트를 만나면 DOM을 그림과 동시에 스크립트를 다운받는다. 스크립트를 다운받고 난 후 바로 스크립트를 실행합니다. 만약 스크립트 실행에 어느한 돔을 컨트롤 하는 이벤트가 있는데, 그 돔이 그려지기 전이라면 문제가 발생 할 수 있습니다.

defer

• defer 스크립트 로드 방식에서는 브라우저가 해당 스크립트를 만나면 DOM을 그림과 동시에 스크립트를 다운받는다. 이 때, 스크립트를 전부 다운로드 받더라도 스크립트를 바로 실행하지 않고 DOM이 전부 그려질 때 까지 기다렸다가 스크립트가 실행됩니다. 때문에 async 속성에서 발생하는 돔이 그려지기 전에 발생 할 수 있는 단점을 해소할 수 있습니다.