[Javascript 💡] document.onload vs window.onload

window.onload 과 document.onload 의 차이는 주로 웹 페이지의 로딩 이벤트 처리에 관련이 있으며, 이 두 이벤트는 서로 다른 시점에 발생할 수 있으며 브라우저의 동작에 따라 다를 수 있음

 

1. window.onload:
   • window.onload 이벤트는 전체 페이지와 모든 리소스(이미지, 스타일시트, 스크립트 등)가 완전히 로드되고 초기화된 후에 발생함
   • 이 이벤트는 페이지의 모든 요소 및 리소스에 접근할 수 있도록 보장함
   • 따라서 모든 HTML, CSS, 이미지, 스크립트 등이 로드된 이후에 실행되기 때문에, 보다 안전하게 페이지 초기화 및 스크립트 로직을 실행할 수 있음
2. document.onload:
   • 반면에 document.onload 이벤트는 초기 HTML 문서의 로딩이 완료된 후에 발생함. (스타일시트, 이미지, 스크립트와 같은 외부 리소스의 로딩을 기다리지 않음)
   • 따라서 document.onload 이벤트가 발생할 때에는 페이지의 초기 구조는 완료되었지만, 모든 외부 리소스가 로드되지 않았을 수 있음
   • 이는 빠른 초기 렌더링을 위해 필요한 최소한의 HTML이 로드되었을 때 유용함

→ 이 두 이벤트의 차이는 페이지의 특정 요구사항에 따라 다를 수 있음. 브라우저 버전에 따라 동작이 조금 다를 수 있으므로, 특히 이전 버전의 브라우저에서는 주의가 필요함. 이외에도 document.onreadystatechange 이나 DOMContentLoaded 이벤트 등을 활용하여 페이지 로딩 시점을 더 정교하게 다룰 수 있음