script async vs defer

0. Intro

• 브라우저 렌더링에서 HTML|CSS|JS 코드의 파싱은 직렬적으로 수행된다.

• 따라서 DOM 생성이 완료되지 않은 상태에서 해당 DOM을 변경하는 <script>를 만나면 오류가 발생하게 된다.
• HTML5에서 도입된 1. async와 2.defer는 JS 파일을 비동기적으로 로드해 이러한 오류를 근본적으로 해결할 수 있다.

Q 그렇다면 async와 defer는 어떤 특성이 있고 각각 어떤 상황에서 써야하는 걸까?

1. async | defer의 특성

• async, defer 속성 모두 <script>를 만나면 비동기적으로 HTML 파싱과 동시에 JS 파일을 로드한다.
• src 속성을 통해 연결된 외부 JS파일만 동작한다. 인라인 방식의 <script>에서는 동작하지 않는다.

(1) async

• 로드가 완료되면 곧바로 JS 파일이 실행된다.
• 로드 후 바로 실행되기 때문에 조작하려는 DOM 객체가 만들어지지 않았다면 역시 오류가 발생한다.
• 스크립트는 완료된 순으로 실행되기 때문에 순서가 보장되지 않는다.

  1. 제어할 DOM이 이미 존재하거나 DOM 제어가 필요하지 않을 때,
  2. <script> 간 종속 관계가 없을 때 사용한다.

(2) defer

• HTML의 파싱이 끝나고 script를 실행한다
• 스크립트 실행이 순서대로 진행된다.

  1. <script> 간 종속 관계가 있어서 순서대로 실행 해야 할 때 사용한다.
  2. HTML 파싱이 끝난 후에 실행되기 때문에 DOM 제어에 오류가 발생하지 않는다.

2. 결론

• async와 defer를 통해 JS 파일을 비동기적으로 로드해 브라우저 렌더링의 속도를 높일 수 있다.
• async와 defer는 각각의 특성이 있으므로 상황에 따라 적절하게 사용해 웹 퍼포먼스를 높이자.

3. 참고

• What’s the difference between async vs defer attributes