[HTML] <script> 태그 속 async, defer 비교
HTML로 웹 페이지를 구현하다 보면 <script>를 통해 여러가지 요청들을 처리해야 하는 순간들이 온다.
하지만 아무생각 없이 태그 중간중간마다 <script>를 통해 요청들을 처리한다면 웹페이지 로드가 크게 느려진다.
브라우저는 HTML을 읽다가 <script> 태그를 만나면 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈추기 때문이다.
<p> 1번 </p>
<script src="..."></script>
<!-- 스크립트 다운로드 및 실행이 끝나기 전까지 아래 내용이 보이지 않는다. -->
<p> 2번 </p>즉 다음과 같은 코드가 있을 때, 1번 <p>는 바로 로드되어 보여지지만
2번 <p>가 로드되기 전 <script>가 다운로드 및 실행되어 이 과정이 끝나고 나서야 2번 <p>는 보여지게 된다.
<script>가 코드 곳곳에 많이 존재하고 요청을 처리하는데 얼마나 걸릴지 모르는 상황에서 위와 같이 코드를 작성한다면, 사용자는 웹페이지를 읽는데 불편함을 겪을 것이다.
async, defer
위와 같은 문제를 해결하고자 script에서 사용할 수 있는 키워드가 async, defer이다.
위 둘은 브라우저가 <script>를 만났을 때 각자 다른 방법을 통해 script 요청을 처리한다.
async
브라우저는 async가 포함된 스크립트를 백그라운드에서 다운로드한다.
따라서 HTML 페이지는 async 스크립트 다운 완료를 기다리지 않고 페이지 내 콘텐츠를 처리, 출력한다.
하지만 async 스크립트 다운이 완료되고 실행되는 중에는 HTML 파싱이 멈추고,
async 스크립트 실행이 완료되고 나서야 다시 HTML 파싱이 시작된다.
defer
async와 마찬가지로 브라우저는 defer가 포함된 스크립트를 백그라운드에서 다운로드한다.
따라서 HTML 페이지는 defer 스크립트 다운 완료를 기다리지 않고 페이지 내 콘텐츠를 처리, 출력한다.
defer 스크립트 다운이 완료된 뒤에는 스크립트 실행이 맨 마지막으로 지연되어,
모든 페이지 내 콘텐츠의 처리, 출력이 끝난 뒤에 defer 스크립트가 실행된다.
정리
위 사진은 기본 <script>와 async, defer의 작동 방식을 한 눈에 알아볼 수 있는 이미지이다.
무작정 <script>를 사용하여 페이지의 로드를 지연시키는 것보다는, async와 defer 키워드를 적절히 활용하여
페이지 로드 지연을 최소화하고 사용자의 편의를 올릴 수 있을 것이다.
물론 async와 defer를 사용할 때는 요청이 처리중이라는 상태 전달(원형 프로세스 바 등...)을 해주어야 할 것이다.