- 스크립트에서는 스크립트 아래에 있는 DOM 요소에 접근 불가능. 따라서 DOM 요소에 핸들러를 추가하는 것고 같은 행위 불가능.
- 페이지 위쪽에 용량이 큰 스크립트가 있는 경우, 스크립트가 페이지를 막아버림. (렌더링 블로킹)
Defer
- 브라우저는
defer속성이 있는스크립트를 백그라운드에서 실행시킴
- 따라서 defer 스크립트를 다운로드 하는 도중에도 HTML 파싱이 멈추지 않는다.
- 그리고 defer 스크립트 실행은 페이지 구성이 끝날 때 까지 지연된다.
- 즉, js 로드가 완료 되도 HTML 파싱 이후에 js가 실행됨.
- defer 스크립트는 페이지 생성을 막지 않는다.
- defer 스크립트는 DOM이 준비된 후에 실행되긴 하지만, DOMContentLoaded 이벤트 발생 전에 실행된다.
Async
- 페이지와 완전히 독립적으로 동작한다.
- async 스크립트는 defer 스크립트와 마찬가지로 백그라운드에서 다운로드 된다.
- 따라서 HTML 페이지는 async 스크립트 다운이 완료되길 기다리지 않고 페이지 내 콘텐츠를 처리, 출력한다. (async 실행중에는 HTML 파싱이 멈춘다.)
- 로드 완료 시점에 HTML 파싱을 기다리지 않고 바로 실행됨.
- HTML 문서가 완전히 다운로드 되지 않은 상태라도 로드 및 실행될 수 있다. 스크립트 크기가 작거나 캐싱 처리 되어있을때 혹은 HTML 문서 길이가 아주 길 때.
- 전체 페이지와 독립적으로 동작하는 script 에 추가시 용이 (댓글 모듈, 좋아요 카운터 등등)