jQuery의 $(document).ready()와 window.onload 차이점 분석

자바스크립트 기반 웹 개발에서 특정 시점에 함수를 실행하기 위해 이벤트 훅(hook)을 사용한다. 대표적인 두 가지 방식으로는 순수 JavaScript의 window.onload와 jQuery의 $(document).ready()가 있다. 두 방법 모두 페이지 로딩과 관련되지만, 동작 타이밍과 사용성 측면에서 중요한 차이가 존재한다.

1. 실행 시점의 차이

window.onload는 문서 내 모든 리소스 — HTML 요소, 스타일시트, 이미지, iframe, 폰트 등 — 의 완전한 로드가 끝난 후에야 콜백 함수를 실행한다. 네트워크 속도가 느릴 경우 수초 이상 지연될 수 있다.

반면 $(document).ready()는 DOM 트리만 구성되면 즉시 실행된다. 리소스 다운로드 여부와 무관하므로, 사용자 인터랙션 반응 속도가 훨씬 빠르다. 예:

$(document).ready(function() {
    console.log("DOM 구축 완료");
});

위 코드는 이미지나 외부 자산이 아직 로딩 중이라도, DOM 해석이 끝나는 즉시 실행된다.

2. 다중 등록 가능성

window.onload는 단일 함수만 할당 가능하다. 동일한 이벤트에 여러 핸들러를 등록하면 마지막 것이 덮어쓴다.

window.onload = function() {
    alert("첫 번째 실행");
};
window.onload = function() {
    alert("두 번째 실행");
};
// 실제 출력: "두 번째 실행"만 발생

반대로 jQuery의 ready 메서드는 누적 등록이 가능하다.

$(document).ready(function() {
    alert("단계 1");
});

$(document).ready(function() {
    alert("단계 2");
});
// 결과: 두 경고창 모두 순차적으로 표시됨

3. 축약 문법 제공 여부

$(document).ready()는 다음과 같은 간결한 형태로 줄여 쓸 수 있다.

$(function() {
    // DOM 준비 후 실행할 로직
});

이는 가독성과 작성 효율성을 높이며, 전통적인 window.onload에는 해당 기능이 없다.

윈도우 로드 이벤트 대안: $(window).load()

특정 요소의 실제 크기나 위치 계산, 이미지 처리 등의 작업은 리소스 완전 로드 이후에만 유효하다. 이때는 $(window).load()를 사용하는 것이 적절하다.

$(window).load(function() {
    $('#thumbnail').click(function() {
        generatePreview();
    });
});

이 코드는 모든 자산(이미지 포함)이 로드된 후 이벤트를 바인딩하므로, 예상치 못한 오류를 방지할 수 있다. 이는 순수 JS의 window.onload와 동등한 동작을 한다.

IE와 프레임 환경에서의 특이 동작

프레임셋 내부에서 페이지를 로드할 경우, Internet Explorer는 $(document).ready()의 감지 방식에 따라 예측 불가능한 순서로 이벤트를 처리할 수 있다. jQuery는 IE에서 documentElement.doScroll("left")를 이용해 DOM 준비 상태를 확인하는데, 이 메커니즘은 프레임 내에서는 본래 window.onload보다 늦게 실행될 수 있다.

예를 들어, 접근 불가한 외부 리소스가 있을 경우, IE는 해당 요청 타임아웃까지 기다린 후에야 전체 로드를 판단하므로, $(document).ready() 호출이 크게 지연될 수 있다. Firefox나 Chrome은 이러한 상황에서도 DOM 파싱 완료 즉시 ready 상태를 보고하여 더 빠른 반응을 보인다.

DOM 생성 이전에 코드 실행하기

극소수의 경우, DOM 구성 이전에 스크립트를 실행해야 할 필요가 있다. 이때는 즉시 실행 함수(IIFE)를 사용하면 된다.

<script>
(function($) {
    console.log('DOM 생성 전 실행');
})(jQuery);
</script>

이 방법은 전역 스코프 오염을 막고, jQuery 플러그인이 로드되기 전 조건 처리에 유용하다.

최적의 선택 전략

$(document).ready(): 일반적인 DOM 조작, 이벤트 바인딩, UI 초기화에 최적.
$(window).load(): 이미지 치수 참조, 캔버스 렌더링, 폰트 로드 완료 대기 등 리소스 종속 작업에 사용.

성능과 사용자 경험을 고려하면, 대부분의 경우 $(function(){}) 형태로 시작하고, 특별한 이유가 있을 때만 $(window).load()를 사용하는 것이 바람직하다.

태그: jQuery DOM JavaScript 이벤트처리 웹성능

7월 10일 18:11에 게시됨

괴물 클럽