브라우저 렌더링 과정과 window.onload = () => { } , $(document).ready( )

브라우저 렌더링 과정

  1. HTML 파싱 및 DOM 생성 ( DOMContentLoaded 이벤트 발생 )

브라우저가 HTML 문서를 위에서 아래로 읽으며 **DOM( Document Object Model )**을 생성합니다.
이 시점에서는 CSS 및 이미지 같은 외부 리소스가 완전히 로드되지 않았을 수 있습니다.

 

   2. CSSOM 생성 및 렌더링 준비

CSS 파일을 파싱하여 CSSOM( CSS Object Model )을 생성합니다.
DOM과 CSSOM이 결합되어 **렌더 트리( Render Tree )**를 구성합니다.

 

   3. 렌더링 및 페이지 표시

브라우저가 렌더 트리를 기반으로 레이아웃을 계산하고 페이지를 화면에 그립니다.
일부 인터랙션이 가능해질 수 있습니다.

 

   4. 모든 리소스 로드 완료 ( window.onload 이벤트 발생 )

모든 이미지, 스크립트, 스타일시트 등의 외부 리소스가 완전히 로드된 후 window.onload 이벤트가 발생합니다.

 

---

$(document).ready( function() { } )

jQuery의 ready() 함수는 DOM( Document Object Model )이 로드되고 나서 실행됨
즉, HTML 요소가 준비되면 스크립트가 실행되므로, 이미지, CSS 등 기타 리소스가 모두 로드되지 않아도 동작

특징:
DOM만 로드되면 실행 → 빠른 실행 가능.
페이지의 다른 리소스(이미지, CSS 등)는 로드되지 않아도 됨.

 

window.onload = () => { }

 (순수 JavaScript 방식)

window.onload 이벤트 핸들러는 페이지의 모든 리소스( HTML, 이미지, CSS, JS, 폰트 등 )가 완전히 로드된 후 실행됨

 

 

특성	$(document).ready()	window.onload
실행 시점	DOM 로딩 완료 후 즉시	모든 리소스 로드 후
리소스 로딩 여부	이미지, CSS 무관	모든 리소스 로딩 후 실행
실행 속도	더 빠름	더 느림
중복 등록 가능 여부	가능	불가능 (덮어쓰기 됨)
jQuery 필요 여부	필요	불필요 (순수 JS)