오늘은 바닐라 자바스크립트로 코딩할때 으레 사용하게 되는 domContentLoaded 이벤트에 대해 궁금증이 생겼습니다.
<script defer>처럼 defer 속성을 주거나 <body>의 최하단에 <script>를 적용하거나 하면
dom 요소가 모두 로드되고 실행되어서 domContentLoaded 는 사용하지 않아도 되는 줄 알았는데,
확실히 보장하려면 사용하는게 좋다는 결론을 얻었습니다.
사용 여부는 script 태그의 속성이 어떤지에 따라 달라질 수 있으므로, 먼저 script 태그의 속성부터 정리해보겠습니다.
script - defer
- 로딩 시점: 스크립트는 HTML 파싱 동안에 백그라운드에서 다운로드됩니다.
- 실행 시점: HTML 문서의 파싱이 완전히 끝난 후, DOMContentLoaded 이벤트가 발생하기 전에 실행됩니다.
- 순서 보장: 여러 개의 defer 스크립트가 있다면, 이들은 HTML 문서에 나타난 순서대로 실행됩니다.
script - async
- 로딩 시점: defer와 마찬가지로 스크립트는 HTML 파싱 동안에 백그라운드에서 다운로드됩니다.
- 실행 시점: 스크립트가 다운로드 완료되는 즉시 실행됩니다. 이는 HTML 파싱 중이라도 발생할 수 있습니다. < 주의!
- 순서 보장 없음: 여러 개의 async 스크립트가 있을 경우, 다운로드가 끝나는 순서대로 즉시 실행되므로 실행 순서가 HTML 문서 내의 위치와 무관하게 실행됩니다.
언제 사용할까?
- defer 사용: 스크립트가 문서의 다른 요소에 의존적이거나, 스크립트들 사이에 실행 순서가 중요할 때 적합. DOM 요소를 조작하거나 다른 스크립트의 함수를 호출하는 경우!
- async 사용: 스크립트가 문서의 나머지 부분과 독립적으로 실행될 수 있고, 실행 시점이 중요하지 않을 때. 광고 스크립트 등을 페이지 로드 시 빠르게 실행하고 싶을 때 async가 유리!
domContentLoaded
결국 두 속성 모두 domContentLoaded 를 사용하는게 좋습니다.
defer의 실행시점은 파싱은 끝났지만 domContentLoaded 이벤트 발생 전이고,
async의 실행시점은 다운로드 완료 즉시 이므로, 양쪽 모두 이왕이면 domContentLoaded 이벤트를 사용하여 스크립트를 처리하면 좋을 것 같습니다!
'javascript' 카테고리의 다른 글
| [240504 WIL] query params (0) | 2024.05.04 |
|---|---|
| [240503 TIL] 전역변수? 지역변수? live binding (0) | 2024.05.03 |
| [240501 TIL] AbortController (0) | 2024.05.01 |
| [240430 TIL] HTMLCollection, NodeList (0) | 2024.04.30 |
| [240429 TIL] 이벤트 루프, 태스크 큐 (1) | 2024.04.29 |
