DOMContentLoaded 정리

🔍 DOMContentLoaded 란?

돔트리의 분석이 끝나면 발생하는 이벤트이다.

즉 돔이 다 만들어진 후에 이벤트가 발생하기 때문에 돔이 만들어지기 전에 자바스크립트 코드가 실행되는

오류를 방지할 수 있다.

document.addEventListener('DOMContentLoaded', () => {
		// 실행 될 코드
})

load 이벤트와 비교해볼 수 있는데, load 이벤트는 돔트리 뿐만 아니라 돔 리소스 (ex) 이미지) 로드 까지 다 끝난 후에 발생하는 이벤트이다.

그렇기 때문에 DOMContentLoaded 가 load 이벤트 보다 더 빨리 실행이 되어서 로딩 속도 측면에서

더 우위에 있다.