JQuery의 ready, onload 차이

호출 시점의 차이
- 한 페이지에 두 함수가 모두 있는 경우 실행 우선순위(ready → onload)
- ready: DOM Tree 생성 후
- onload: 모든 페이지 구성요소 페인팅 완료 후
기본적인 HTML 문서 렌더링 과정
- Loading(불러오기)
  - 불러오기는 Http 모듈 또는 파일시스템으로 전달받은 리소스 스트림(Resource Stream)을 읽는 과정으로 로더(Loader)가 이 역할을 수행
  - 로더(Loader)는 단순히 읽는 것이 아니라, 이미 읽었는지 확인, 팝업창을 열지 말지, 또는 파일을 다운로드 받을 지 결정
- Parsing(파싱)
  - DOM Tree를 만드는 과정
  - 웹 엔진이 가지고 있는 HTML/XML 파서가 문서를 파싱해서 DOM Tree를 만듦
  - DOM Tree
    - 내용을 저장하는 트리
    - javascript에서 접근하는 DOM 객체를 사용할 때 이용
- Rendering Tree(렌더링 트리 만들기)
  - DOM Tree와는 별도로 그리기 위한 트리가 만들어지는 과정에서 그려지는 트리
  - 그릴 때 필요없는 head, title, body 태그 등이 있음?
  - display:none 처럼 DOM에는 있지만 화면에서는 걸러내야할 것들이 걸러내진 트리
- CSS 결정
  - css는 선택지에 따라서 적용되는 태그가 다름
  - 따라서, 모든 css스타일을 분석해 태그에 적용되는 스타일 규칙이 적용되게 결정
- Layout(레이아웃)
  - 렌더링 트리에서 위치나 크기를 가지고 있지 않음
  - 객체들에게 위치와 크기를 결정해주는 과정
- Painting(그리기)
  - 렌더링 트리를 탐색하면서 페이지를 그림
정리
- $(document).ready
  - 호출 시점 → Loading, Parsing이 완료되어 DOM Tree 생성이 완료된 후 호출
  - 외부 리소스 및 이미지 로딩과 상관없이 DOM만 로드되면 실행
  - 중복 사용해도 순서대로 모두 실행
- $(document).onload
  - 호출 시점 → 모든 과정이 완료되어, 웹 페이지가 구성된 후 호출
  - 페이지의 모든 요소들이 로드된 이후 호출
  - 한 페이지에서 하나의 onload 함수만 적용
  - 가장 나중에 작성된 함수만 적용