[jQuery] .ready 와 .onload의 차이점

$(document).ready(function(){
	alert('junfe - reday');
});

$(window).onload(function(){
	alert('junfe - load');
});

 

두 코드의 차이점은 무엇일까?

 

- 호출 시점의 차이 : 한 페이지에 두 함수 모두 있으면 우선 순위는 .ready() -> .onload() 순으로 실행된다.

 

즉 .ready()는 DOM tree 생성 완료 후 호출되고, .onload()는 모든 페이지 구성요소 페인팅 완료 후 호출 되는 것이다.

 

 

 

[html문서 렌더링 과정]

1. 불러오기(Loading)

 - 불러오기는 HTTP 모듈 또는 파일시스템으로 전달받은 리소스 스트림(Resource Stream)을 읽는 과정으로 로더(Loader가 이 역할을 맡음.

- 로더는 단순히 읽는 것이 아니라, 이미 데이터를 읽었는지도 확인, 팝업창을 열지말지, 또는 파일을 다운로드 받을 지를 결정한다.

 

2. 파싱(Parsing)

 - 파싱은 DOM(Document Object Model) 트리를 만드는 과정이다.

 - 웹 엔진이 가지고 있는 HTML/XML 파서가 문서를 파싱해서 DOM Tree를 만든다.

 - DOM Tree : 내용을 저장하는 트리로 javascript에서 접근하는 DOM객체를 쓸 때 이용된다.

 

3. 렌더링 트리 만들기(Rendering Tree)

- 렌더링 트리 : DOM Tree와는 별도로 그리기 위한 트리가 만들어져야 하는데, 그것이 렌더링 트리

(그릴 때 필요없는 head, title, body 태그 등은 없음 + display:none; 처럼 DOM에 있지만 화면에서 걸러내야할 것들은 걸러진 트리

 

4. CSS 결정

 - CSS는 선택자에 따라서 적용되는 태그가 다르기 때문에 모든 CSS 스타일을 분석해 태그에 스타일 규칙이 적용되게 결정.

 

5. 레이아웃(Layout)

 - 렌더링 트리에서 위치나 크기를 가지고 있지 않기 때문에 객체들에게 위치와 크기를 정해주는 과정을 레이아웃이라고 한다.

 

6. 그리기(Parsing)

 - 렌더링 트리를 탐색하면서 페이지를 그려나간다.

 

 

출처: https://hahahoho5915.tistory.com/28 [넌 잘하고 있어]