defer, async

𝐝𝐚𝐭𝐚𝐛𝐚𝐬𝐞
/
front 관련 지식 database
/프론트엔드 날개달기: Vuejs, React 배우기 전에 꼭 알아야하는 지식
/
defer, async
Search
Share
defer, async
태그
Select
섹션0
Javascript load
<script> 태그의 위치에 따른 문제
DOM 은 브라우저의 렌더링 엔진을 이용해 html 을 한줄씩 parsing 하면서 생성됩니다. 한줄씩 읽어서 렌더링을 하다가 <script> 태그를 만나면 어떻게 될까요? 일단 html 파일의 parsing 을 멈추고 해당 js 파일을 parsing 하기 시작합니다. 하지만 이 때 해당되는 요소가 아직 객체화 되기 전이라면 어떻게 될까요?
개발자 모드에서 에러가 뜨는것을 확인할 수 있을겁니다. 이를 해결하기 위한 3가지 방법이 있습니다.
•
<body> 의 최하단에서 <script> 실행하기
•
window.onload 등록
DOM 생성 뿐만 아니라 img, script, css 등의 컨텐츠가 전부 로드된 후 발생하는 이벤트 입니다.
•
DOMContentLoaded 사용
window.onload 와 다르게 컨텐츠가 로드되는것을 기다릴 필요 없이 DOM 생성이 끝나고 바로 이벤트가 발생합니다.
Window: DOMContentLoaded event - Web APIs | MDN
The DOMContentLoaded event fires when the HTML document has been completely parsed, and all deferred scripts (<script defer src="…"> and <script type="module">) have downloaded and executed. It doesn't wait for other things like images, subframes, and async scripts to finish loading.
https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
위의 세가지 방법을 써도 어찌되든 HTML parsing 이 끝나고 나서야 script fetch → script execution 이 발생합니다. 이러한 불편함을 줄이기 위해 html5 에서는 다음과 같은 두 방식이 추가되었습니다.
Javascript defer 와 async
defer
HTML 파싱과 함께 비동기로 JavaScript 파일을 불러옵니다. 때문에 HTML 파싱이 완료된 후, JavaScript 코드를 실행합니다.
<script src="" defer></script>
HTML
복사
async
HTML 파싱과 함께 비동기로 JavaScript 파일을 불러온다는 점은 defer 와 같지만 HTML 파싱 완료를 기다리지 않고 먼저 로딩되는 JavaScript 파일부터 실행이 시작된다는 점에서 차이가 있습니다.
단, JavaScript 파일을 실행할 때에는 HTML 파싱이 중단됩니다.
<script src="" ansync></script>
HTML
복사