웹 페이지가 브라우저에 로드될 때 특정 작업을 수행하려면 window.onload 또는 onDocumentReady를 사용할 수 있습니다. 두 기능 모두 페이지 로딩 시점에 코드를 실행한다는 공통점이 있지만, 실행 시점과 동작 방식에서 중요한 차이가 있습니다.
window.onload란?
window.onload는 DOM 트리뿐만 아니라 이미지, 객체(iframe 등), 스타일시트처럼 페이지에 포함된 모든 리소스가 완전히 로드된 후에 코드를 실행합니다. 따라서 외부 리소스가 많거나 용량이 큰 페이지에서는 실행 시점이 상당히 늦어질 수 있습니다.
onDocumentReady란?
onDocumentReady(jQuery에서는 $(document).ready())는 DOM 트리가 구축되는 즉시 실행되며, 이미지 같은 다른 리소스의 로딩 완료를 기다리지 않습니다. 이 덕분에 화면이 사용자에게 표시되는 시점에 가까운 타이밍에 DOM 조작 코드를 더 빠르게 실행할 수 있습니다.
주요 차이점 비교
- 실행 시점: window.onload는 모든 리소스 로드 후, document.ready는 DOM 구축 직후 실행됩니다.
- 실행 속도: 불필요한 대기가 없는 document.ready가 일반적으로 더 빠릅니다.
- 호환성: window.onload는 브라우저마다 동작 방식에 미세한 차이가 있어 크로스 브라우저 호환성이 떨어질 수 있습니다.
- 다중 등록: jQuery의 ready()는 여러 번 호출해도 핸들러가 모두 실행되지만, window.onload에 함수를 재할당하면 이전 핸들러는 덮어써집니다.
브라우저 호환성 관련 참고 사항
window.onload는 브라우저마다 구현 방식과 이벤트 처리 순서가 달라 크로스 브라우저 환경에서 예기치 않은 문제가 발생할 수 있습니다. 반면 jQuery의 $(document).ready()는 내부적으로 브라우저 간 차이를 처리해 주므로 모든 브라우저에서 안정적으로 동작합니다.
현대 자바스크립트에서의 대안
참고로 최신 표준 자바스크립트에서는 jQuery 없이도 유사한 기능을 사용할 수 있습니다. DOMContentLoaded 이벤트는 document.ready와 마찬가지로 DOM 구축 직후 실행되며, 다음과 같이 활용할 수 있습니다.
document.addEventListener('DOMContentLoaded', function() {
// DOM 조작 코드
});정리
빠른 DOM 조작이 필요하다면 document.ready(또는 DOMContentLoaded)를, 이미지 크기 계산처럼 모든 리소스가 준비된 후에 실행해야 하는 작업이라면 window.onload를 사용하는 것이 적합합니다. 상황에 맞는 선택이 성능과 사용자 경험을 모두 개선할 수 있습니다.