[Web] $(document).ready 와 window.onload = function() 의 차이점!

안녕하세요.

 

보통 jsp에서 <script> 안에 웹페이지 호출 시 출력하는 함수를 만들기 위해 사용하는 두 가지 함수가 있습니다.

 

$(document).ready(function () { }) 은 jquery이고, wondow.onload = function() 은 기본 javascript 함수 입니다.

$(document).ready(function () {
	console.log("document ready!");
});

 

window.onload = function() {
	console.log("window onload!");
}

 

 

이제, 두 함수의 차이를 간단하게 말씀드리겠습니다.

 

결론은 $(document).ready 가 window.onload 보다 먼저 호출됩니다.

 

 

그 이유는 $(document).ready 는 DOM 트리만 완성되면 바로 호출하기 때문입니다.

 

즉, 웹 페이지를 구성하는 단계에서 DOM 트리를 만든 이후, CSS나 외부 import한 js, 이미지, iframe 등을 추가적으로 로딩한 다음 웹 페이지가 완성되는데요. 이렇게 모든 구성 요소를 로딩(메모리에 적재 후 화면에 출력) 시킨 후에 호출하는 함수가 window.onload 이기 때문입니다.

 

 

그렇기 때문에, $(document).ready 는 빠른 실행 속도가 필요할 때 사용되며, 중복해서 여러 개를 만들어두면 순차적으로 실행됩니다.

 

반면, window.onload는 단 하나의 함수만 호출되고 나머지는 무시합니다.

 

 

간단하죠?

 

감사합니다.