Written by Tina
on 

async와 defer

기본적으로 브라우저는 HTML 파싱을 하다가 <script>를 만나면 HTML 파싱을 중단하고 스크립트 리소스를 다운로드, 파싱, 실행한다 이럴 경우 화면을 렌더링하는데 그만큼 시간이 소모되므로 사용성이 떨어진다

  default-parse-graph

 

async 를 사용했을 때

async-parse-graph

  HTML 파싱을 계속하다가 <script>를 만나면 스크립트 리소스를 다운로드하되 파싱을 중단하지 않는다 다운로드가 완료되면 파싱을 중단하고 스크립트를 실행한다

특징

스크립트의 실행 순서는 다운로드가 완료된 시점에 결정된다

<script src="a.js" async>
<script src="b.js" async>
<script src="c.js" async>

위의 코드처럼 a.js b.js c.js 순서로 정의했어도 다운로드하는데 걸린시간이 다음과 같다면

a.js : 3초
b.js : 1초
c.js : 2초

b.js c.js a.js 순으로 실행이 된다

정의한 순서대로 스크립트 실행되기를 보장하기 위해 HTML5에서 async=false 가 추가되었다 기본값은 async=true 이다

defer 를 사용했을 때

defer-parse-graph

  HTML파싱하는 동안 <script>를 만나면 파싱 중단없이 스크립트 리소스를 다운로드하고 HTML 파싱이 완료되면 스크립트가 실행이 된다

정의된 순서대로 스크립트가 실행된다

어떤 속성을 사용할 것인가

<body> 태그가 닫히기 직전 <script> 태그를 선언한다면 이미 거의 모든 HTML 파싱이 종료된 상태이므로 async 속성이든 defer 속성이든 큰 의미가 없다 하지만 그렇게 하지 않은 경우에는 어떤 속성을 사용하는 것이 좋을까

async를 사용해야 할 때

defer를 사용해야 할 때