DOMContentLoaded
document.addEventListener("DOMContentLoaded", () => {
// ...something
})
- DOMContentLoaded 이벤트는 모든 HTML DOCUMENT가 파싱되고, <script defer src="...">와 <script type="module">들이 다운로드되고 수행되었을 때 실행된다.
- 다만 이미지 다운로드나 subframes, async script는 고려하지 않고 실행된다.
- DOMContentLoaded는 stylesheets(css)는 기다려주지 않지만, deferred scripts는 stylesheet를 기다려준다.
그리고 DOMContentLoaded는 deferred script 뒤에 실행된다.
- 또한 deferred나 async가 붙어있지 않은 script (ex. <script>) 는 파싱되어 대기중인 stylesheet가 모두 로드될 때 실행된다.
Load
addEventListener("load", (event) => {})
- The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.
