[jQuery기초] 기본템플릿, load 이벤트 그리고 ready 이벤트

Load 이벤트

• DOM(Document Object Model)의 Standard 이벤트

• 화면에 필요한 모든 요소화면에 필요한 모든 요소(*Html, Css, Js, Image, Iframe등)가 브라우저 메모리에 올라간 경우 실행된다. 

• 요소에 문제가 생길 경우 딜레이가 발생할 수 있다.

• 중복 선언 시 하나만 실행되므로 주의해야한다.

$(window).load(function(){
	// 코드 작성
});

 

 

Ready 이벤트

• 리소스 상관없이 브라우저가 DOM Tree를 생성한 직후에 실행된다.

• load 이벤트보다 빨리 실행되며 중복 선언이 가능하며 선언 순서에 따라 실행된다.

$(document).ready(function(){
	// 코드 작성
});

 

 

Load VS Ready

두 이벤트의 차이를 이해하기 위해서 브라우저의 흐름을 알아보자

 

전체 흐름

 

 

[사용자 페이지 접속]

→ HTML 파일 서버로부터 전달 받음 

→ HTML 파싱 후 DOM(Document Object Model) Tree 생성

 

DOM Tree

 

 

→ CSS 파싱 후 Style Rules 생성

Style Rules

 

 

→  DOM Tree, Style Rules 결합 Render Tree 생성

DOM Tree + Style Rules = Render Tree

 

 

→ [사용자 페이지 확인]

 

 

간단하게 흐름 확인

사용자 방문 →

브라우저 시작 →

문서 파싱 →

DOM 생성(Ready 실행) →

리소스 로드 →

페이지 로딩 완료(Load 실행)

 

load 이벤트,  ready 이벤트 차이는 '호출시점'의 차이 (ready → load 순)

 

*window > document

document 객체는 window 객체의 자식객체이며 html의 요소들이나 속성에 접근할 때 사용한다.

 

Shorhand(줄여쓰기)

$(function(){
	// 코드 작성
});