Script 태그의 종류 (defer, async)

최근 면접 질문으로 script 태그의 종류를 질문 받았는데, 내가 이 부분을 제대로 모르고 있었구나 하는 생각이 들어서 다시금 정리해보려고 한다.

script 태그의 defer async

일반적으로 브라우저는 HTML 태그를 읽다가 script 태그를 만난 순간 DOM 생성을 멈추고 script 실행을 하게 된다.
이러한 이유로 몇 가지 문제점이 발생하게 될 수도 있는데, 천천히 짚고 넘어가 보자.

첫 번째로 script는 아래쪽에 존재하는 DOM 요소에 접근 할 수 없다.
두 번째로 script가 용량이 클 경우 아래쪽의 DOM의 로딩이 지연되게 된다

위와 같은 이슈를 해결하기 위해 스크립트를 페이지 맨 아래에 위치 시키는 방법을 사용하곤 했다.
단, 이 방법도 스크립트의 용량이 클 경우 페이지가 느려진다는 단점이 있다.

defer

defer 속성이 포함된 script는 스크립트 소스를 백그라운드에서 다운로드한다.
또한 defer의 실행은 페이지 구성이 모두 끝난 후까지 지연된다. (DOMContentLoaded 이벤트 전에 실행된다.)
여러 개의 defer가 있는 경우 문서 상의 순서대로 실행된다.

async

async속성이 포함된 script는 defer와 마찬가지로 백그라운드에서 다운로드한다.
async의 실행은 다운로드가 끝나고 즉시 실행된다. (HTML이 완전히 다운로드되지 않은 상태여도 실행될 수 있다.)
여러 개의 async 스크립트가 있는 경우 다운로드가 끝난 순서대로 실행된다.

총 정리