async vs defer

브라우저는 html, css, javascript순서로 파싱을 한다. 웹 브라우저는 기본적으로 동기적인 실행을 하기 때문에 중간에 다른 파일이 파싱을 시작하면 파싱이 끝날 때까지 기다려야 해서 성능상 문제가 발생할 수 있다.

 

일반적인 파싱 방법

1. HTML 파싱을 진행하다가 script 태그를 만나면 html파싱을 중지한다.

2. script파일을 파싱하고 파싱이 완료되면 실행한다. 

3. script파일의 파싱이 완료된 후에 html파싱을 다시 진행해 완료한다.

 

따라서 일반적으로 script 태그를 html태그 맨 마지막 부분에 넣어 html 파싱을 마친 후 script 태그를 실행하도록 한다.

하지만, 사용자 입장에서 javascript로 구현한 성능을 경험하기까지 시간이 소요될 것이고, 이는 사용자 경험을 떨어 뜨린다.

 

Async

async 속성은 비동기적으로 파일을 파싱해서 html파싱과 script파싱을 동시에 이루어지게 한다. 하지만 script파싱이 끝난 시점에서 script 태그를 바로 실행 시킨다. 이는 script 파일을 여러개 붙였을 때 파싱이 먼저 끝난 script파일을 실행시켜, 바로 다음 script 파일에서 가져와야하는 기능을 실행할 수 없다는 문제점이 발생한다.

 

Defer

 

async 속성처럼 비동기적으로 파일을 파싱한다. 다만 defer속성은 파일이 모두 파싱되더라도 실행 시키지 않고 html파일이 파싱될 때까지 기다린 후에 마지막에 실행시킨다. 따라서 파일이 여러개인 경우에는 defer속성이 유리하다. 하지만 script를 가장 마지막에 실행 하기 때문에 html파싱을 끝내야해서 시간을 소요하는 문제가 있다. 따라서 script파일이 하나라면 async 속성을 추천한다.