[ JQUERY ] 로딩 함수 ready, onload 먼저 수행되는 함수는?

안녕하세요, 오늘은 페이지 로딩 시 바로 수행되는 함수 중 Window.onload와 $(document).ready()함수의 차이점에 대해서 알아보도록 하겠습니다. 두 함수의 차이점은 호출 시점으로 확인할 수 있는데요, 자동 실행 함수를 알아보기전에 웹 브라우저가 어떻게 동작하는지 실행 원리에 대해서 선행학습이 되어야 합니다.

 

1. 웹 브라우저 동작 순서

1. 사용자 접속( 웹 브라우저 시작 )
2. 브라우저가 웹 문서 읽기 수행
3. DOM 생성
4. 웹 브라우저 STATIC(IMG, CSS, JS)등 정보 로드 시작
5. 웹 브라우저 로딩이 완료 및 화면이 모두 생성됨

 

2. window.onload

window.onload() = function() {
    console.log('window onload : start');
}

• 화면에 필요한 모든 요소들이 웹 브라우저 로딩이 끝난 후 실행
• 브라우저 로딩에 많은 요소(IMG, CSS, JS, VIDEO, FILE)등이 포함되어있을 경우 onload 이벤트가 딜레이 됨

 

3. $(document).ready()

$(document).ready(function() {
    console.log('window ready : start');
});

• ready 함수는 onload 함수보다 빠른 시점(DOM 생성 직후)에 수행되며 중복으로 선언하였을 경우 순서대로 실행
• 외부 리소스 및 이미지와는 상관없이 DOM 데이터만 로드되면 실행되는 함수