window.onload(js)와 $(document).ready(jquery)의 차이

js의 window.onload (이하 onload)와 jquery의 $(document).ready (이하 ready)의 차이에 대해서 알아보겠다.

 

우선 나는 두 함수를 그냥 페이지가 로드될 때 실행되는 함수라고만 생각했으나, 호출 시점의 차이가 있다고 한다.

간단하게 아래 예제를 보겠다.

// 호출 시점에 대한 차이

window.onload = function() {
	alert("a");
}

$(document).ready(function() {
	alert("b");
});

$(document).ready(function() {
	alert("c");
});

 

위 코드의 실행 순서는 b -> c -> a가 된다

왜 ready가 먼저 실행될까??? 우선 onload부터 알아보자

 

0. HTML 문서의 처리 및 렌더링 과정

• HTML 문서 파싱 : 브라우저가 HTML문서를 받아들이고, 파싱하여 DOM Tree 형성
• 정적자원 로드 : DOM Tree 형성 후 html문서에 포함된 외부 정적자원(image, stylesheet, script)로드
• 로딩이 완료된 후 js가 실행되어 추가적인 자원 로드 (동적페이지)

 

1. window.onload

 - 모든 구성요소를 로딩 시킨 후 호출

   - dom의 모든 구성요소가 로드되고, 정적자원(이미지 등)이 로드 되면 실행이 되는 함수이다.

 - 동일한 문서에는 오직 하나의 onload만 실행된다.

   - onload를 중복선언했을 경우 가장 마지막 onload만 실행된다.

 - window 객체가 실행되었을 때 혹은 원하는 돔 객체가 로드되었을 때 실행할 수 있다.

document.getElementById('name').onload = function() {
	alert('실행');
}

 - jquery의 load는 onload와 같은 동작을 하는 함수이다.

 

 1-1. DOMContentLoaded

   - ready와 실행시점이 같다.

   - ready처럼 중복해서 사용할 수 없다. (이벤트 리스너의 규칙, 중복 등록시 마지막에 등록한 리스너만 실행됨)

   - 사용방법은 아래와 같다.

document.addEventListener('DOMContentLoaded', function() {
	alert('DOM 로드된 후 실행');
});

 

2. $(document).ready

 - DOM Tree가 완성되면 바로 실행된다.

   - 빠른 실행속도가 필요할 때 사용

 - 여러번 사용되면 선언 순서에 따라 순차적으로 모두 실행된다.

 

 2-1. $(function() {})

   - $(document).ready와 같다 사용방법은 아래와 같다.

$(function() {
	alert("DOM 로드된 후 실행");
});

 

 

3. DOM(Document Object Model)트리란 무엇인가? *이해를 돕기위함

 - DOM Tree란 HTML 또는 XML 문서의 구조를 계층적으로 나타낸것, 각 구성요소를 노드(node)라고 부르며 node는 객체(object)로 표현된다.

 

3-1. node의 종류

• Document Node : 문서 전체를 나타내는 최상위 노드 (html)
• Element Node : html요소 (p, div, ul 등)
• Attribute Node : html요소의 속성 (id 등)
• Text Node : 요소의 텍스트 내용 (<h1>hello</h1> 의 hello 부분)
• Comment Node : 주석
• Document Type Declaration Node : html문서의 형식 선언문 (!DOCTYPE html)

 3-2 부모(parent)와 자식(child) 관계

   - 한 노드가 다른 노드를 포함하는 경우 그 노드는 부모이고, 포함되는 노드는 자식이 된다.

<div>
	<p>child</p>
   	<p>child</p>
<div>

    - 위 예제에서 div태그가 부모, p태그가 자식 관계가 성립된다.

 

 

4. 정리

 - onload와 ready에 대해서 알아보았다. 비슷한 성질을 가지고 있지만, 실행시점은 다르다. (ready가 더 빠름)

 - ready와 비슷한 DOMContentLoaded 이벤트가 있다.

 - onload는 모든 정적자원이 로드되었을 때 실행되므로 자원들이 로드되었을 때의 이벤트를 생각한다면 사용하는게 좋다.

 - jquery를 사용하지 않는경우 DOMContentLoaded를 사용을 고려해볼만하다.

 - ready는 $(function() {})으로 축약하여 사용할 수 있다.

 - 대용량 동영상과 같은 큰 리소스는 리소스를 가져오는 함수를 ready에 사용하는게 적합하다.