DOMContentLoaded 와 Load 이벤트의 차이는 무엇인가요?
08 Apr 2019해당 포스트는 Window: DOMContentLoaded event와 Window: load event를 번역하여 작성하였습니다. 잘못된 부분이 있다면 댓글 부탁드립니다.
DOMContentLoaded 이벤트
DOMContentLoaded 이벤트는 초기 HTML 도큐먼트가 로드되고 파스되면 스타일시트, 이미지 및 다른 프레임이 로딩되기전에 실행됩니다. 이벤트의 진짜 타겟은 로드가 완료된 이벤트 입니다. 이벤트는 Window 인터페이스에서 이벤트를 수신하여 캡쳐하고 버블링할 수 있습니다. 자세한 내용은 Document: DOMContentLoaded 참고부탁드립니다.
동기식 javascript는 DOM을 파서하는 것을 정지합니다. 만약 유저가 페이지를 요청했을 때 DOM이 최대한 빠르게 파서되기를 원한다면 javascript를 비동기식으로 변환하든지 스타일시트를 수정하면 됩니다. 보통 스타일시트는 병렬로 로드되면서 DOM 파싱속도를 저하하고 주요 HTML 도큐먼트 트래픽을 스틸합니다.
load 이벤트
load 이벤트는 스타일시트 이미지와 같이 의존성이 있는 리소스가 준비되면 실행됩니다. 이것은 DOMContentLoaded와 정반대입니다.