[JS] DOMContentLoaded (Event)

🎈 DOMContentLoaded란?

• DOM Tree의 분석이 끝나면 시작되는 이벤트이다.
• DOM Tree가 다 만들어진 후에 DOM에 접근이 가능하기 때문에 DOM이 생성되기 전 DOM을 조작하는 JS 코드가 실행되어 원하지 않는 결과를 내는 것을 막을 수 있다.
• 코드가 처음 시작할 때 발생하는 이벤트라고 생각해도 무방하다. (window.onload 느낌..?)

document.addEventListener('DOMContentLoaded', () => {
	// Code
});

🎈 Load 이벤트와의 차이는?

• Load는 모든 리소스 (css, image 등)이 다운로드 된 다음에 이벤트가 호출된다.
• DOMContentLoaded는 DOM Tree를 분석하고 완성하는 즉시 이벤트가 호출된다.
• Load는 이미지 리소스가 다 불러와진 후에 이벤트가 실행되기 때문에 리소스가 많아지면 속도 저하를 야기할 수 있다. 하지만 이미지와 관련된 이벤트를 호출할 경우에는 속도 저하가 원인이 되더라도 Load를 사용해야 한다!
• 따라서 이미지 리소스가 많은 경우에는 defer 옵션 or DOMContentLoaded를 사용하는 것이 좋다!

https://yelee.tistory.com/13
https://velog.io/@hoon_dev/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-DOMContentLoaded-%EC%9D%B4%EB%B2%A4%ED%8A%B8