👩🏻‍💻STUDY/JavaScript

[JavaScript] 문서의 로드시점 - onload / DOMContentLoaded

jmjm 2020. 9. 24. 20:16

문서의 로드시점 - onload / DOMContentLoaded

💡일반적으로, 스크립트 문서의 마지막 </body> 이전에 삽입하면 굳이 이벤트를 이용하여 프로그래밍을 처리할 필요가 없다.

다만,

문서의 <head>영역에 스크립트가 삽입되거나,

외부의 파일에 정의되어 있다면 이벤트를 문서의 로드 시점에 맞게 처리해야 한다.

1. onload

문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트. (load 이벤트라 한다.)

window.onload = function() {
  // 실행될 코드
}

문서에 포함한 모든 콘텐츠가 로드된 후 실행되므로 불필요한 로딩 시간이 추가될 수 있다.
동일한 문서에 오직 onload는 하나만 존재해야 한다.
- 중복될 경우, 마지막 선언이 실행
- 외부 라이브러리에서 이미 선언된 경우, 이를 찾아 하나로 합치는 과정이 필요하다.
외부의 지원(iframe, image, script)을 사용하는 경우에도 해당된다.

<body>요소에 속성(attribute)으로 지정될 수 있다.

<body onload="실행될 코드"></body>

위와 같이 사용될 경우, window.onload 로 지정된 것은 무시된다.

window 객체뿐만 아니라 원하는 객체(object)가 로드되었을 때 실행될 코드로 설정할 수 있다.

document.getElementById('myFrame').onload = function() {
  // 실행될 코드
}

이벤트를 직접 연결할 수도 있다.

window.addEventListener('load', function() {
  // 실행될 코드
});

jQuery load

jQuery에서는 onload와 같은 동작을 하는 load 메소드를 제공한다.

// jQuery
$(window).load(function() {
  // 실행될 코드
});

2. DOMContentLoaded

HTML과 script가 로드된 시점에 발생하는 이벤트.

window.addEventListener('DOMContentLoaded', function() {
  // 실행될 코드
});

onload 이벤트보다 먼저 발생. 빠른 실행속도가 필요할 때 적합하다.
IE8 이하에서는 지원하지 않는다.

jQuery ready

자바스크립트의 DOM 트리가 준비되었을 때의 시점을 컨트롤하는 메소드로 DOMContentLoaded의 jQuery버전이라 생각하자.

// jQuery
$(documenet).ready(function() {
  // 실행될 코드
});

onload 이벤트보다 먼저 발생한다. 즉, 문서의 모든 자원이 다운로드되었을 떄 발생하는 onload와 달리, DOM 트리만 완성되면 바로 발생하므로 빠른 실행 속도가 필요할 떄 적합하다.
여러번 사용되면 선언 순서에 따라 순차적으로 실행된다.

2020/02/05 - [👩🏻‍💻DEVELOPE/jQuery] - [jQuery] ready() load() 차이

Reference

https://webdir.tistory.com/515

저작자표시 비영리 동일조건 (새창열림)