[JavaScript] defer, async

웹 브라우저 에서 자바스크립트 이슈 1

- 브라우저가 서버로부터 HTML, CSS, JavaScript 파일을 받습니다
- HTML, CSS은 렌더링 엔진이 파싱합니다
- JavaScript는 자바스크립트 엔진이 처리합니다
- 처리하는 엔진이 다르기 때문에 JavaScript를 해석 및 실행하는 동안 HTML, CSS파싱은 중단됩니다

- HTML, CSS파싱이 중단되면 JavaScript의 실행이 끝날때 까지 JavaScript아래의 내용을 볼 수 없게 됩니다

 

웹 브라우저 에서 자바스크립트 이슈 2

- JavaScript는 아래에 있는 DOM요소에 접근 할 수 없습니다

---

위의 이슈 때문에 보통 자바스크립트를 페이지 맨하단(body태그 끝쪽)에 놓았습니다. 하지만 이런방식은 완벽한 해결책이 아니며, 페이지가 느려 질 수 있습니다. 이런 문제를 해결 하기 위해 script 속성 defer, async가 있습니다

 

일반 스크립트

 

지연 스크립트 - defer 

- 지연 스크립트는 '백그라운드'에서 다운로드하여 HTML 파싱이 멈추지 않습니다

- 다운로드한 스크립트는 DOM이 준비된 후에 실행됩니다. ( DOMContentLoaded 이벤트 발생 전에 실행 ) 

- 일반 스크립트와 마찬가지로 HTML에 추가된 순서대로 실행됩니다

 

비동기 스크립트 - async

- 지연 스크립트와 마찬가지로 '백그라운드'에서 다운로드 합니다

- 다운로드가 완료되면 바로 스크립트를 실행합니다

- 다운로드가 완료되는 순서대로 실행됩니다

 

동적 스크립트

- 자바스크립트를 이용하여 문서에 스크립트를 동적으로 추가 하였을때

- 문서에 추가되면 바로 다운로드가 실행됩니다

- 기본적으로 비동기 스크립트 처럼 동작합니다

- async = false 을 주면 추가 순 으로 실행합니다.

// 다운로드 순 실행
var script = document.createElement('script');
script.src = '/test.js';
document.body.append(script);

// 추가 순 실행
var script = document.createElement('script');
script.src = '/test.js';
script.async = false;
document.body.append(script);

 

★ defer, async 속성은 외부 스크립트에만 유효합니다 ( src 속성 없으면 무시 )

★ 내부 스크립트는 일반 스크립트 처럼 동작합니다