[Javascript] async , defer 알아보기

 

 

자바스크립트를 로드할 때 async, defer 속성을 보았을 것이다.

위의 두개의 속성은 자바스크립트 로드와 실행차이를 보여준다.

 

 

먼저 기본적인 자바스크립트의 로드에 대해 알아보자

실행 순서는 1 -> 2 -> 3 순으로 실행이 됩니다.

1번은 HTML 구문, 2번은 자바스크립트 구문, 3번은 HTML구문 순 입니다.

 

렌더링 : HTML구문을 브라우저 화면에 해석하여 보여지기까지의 과정

 

여기서 2번 자바스크립트 파일 file.js 가 용량이 큰 파일이어서 로드되는데 2초가 걸리고 실행시간이 1초가 걸린다고 가정해보자

이렇게 되면

1번 HTML구문을 렌더링

2번 자바스크립트 로드시 총 3초가 걸리고

3번 HTML나머지 구문을 렌더링

 

이렇게 된다면 웹 페이지를 이용하는 사용자들은 홈페이지가 느리다고 판단을 합니다.

 

이런 이유에서 보통 async, defer 속성을 이용한다.

 

async속성은 HTML렌더링을 멈추지 않고 동시에 js 파일을 다운로드 하고 다운로드가 끝난 후에 자바스크립트를 실행합니다.

defer속성은 HTML렌더링을 멈추지 않고 동시에 js 파일을 다운로드 하고 HTML렌더링이 끝난 후에 자바스크립트를 실행합니다.

 

 

defer 속성은 현재 익스플로러 6버전 이상에서만 작동을 하며 나머지 브라우저(크롬,파폭) 등에서는 작동을 하지 않습니다.

 

<async, defer 그림으로 이해하기>

 

 

이해가 안가면 될 때까지 보시면 됩니다.