jQuery: 외부 JS가 페이지 하단에 있는 경우 document.ready를 사용하는 이유는 무엇입니까?

jQuery: 외부 JS가 페이지 하단에 있는 경우 document.ready를 사용하는 이유는 무엇입니까?

페이지 맨 아래에 로드되는 외부 파일로 JS를 모두 포함합니다.이 파일에는 준비 이벤트에서 호출하는 몇 가지 방법이 있습니다.

var SomeNamepsace = {};

SomeNamepsace.firstMethod = function () {
    // do something
};

SomeNamepsace.secondMethod = function () {
    // do something else
};

$(document).ready(function () {
    SomeNamepsace.firstMethod();
    SomeNamepsace.secondMethod();
});

그러나 준비된 기능을 제거하고 메서드를 바로 실행하면 모든 작업이 동일하게 수행되지만 실행 속도는 상당히 빨라집니다. 기본 파일에서는 거의 1초 정도 빨라집니다.모든 마크업이 스크립트 태그 앞에 있기 때문에 이 시점에서 문서를 로드해야 하는데, 준비 이벤트를 계속 사용할 충분한 이유가 있습니까?

좋은 질문입니다.

전체 "페이지 하단에 스크립트 입력" 조언과 해결하려는 문제에 대해 약간의 혼란이 있습니다.이 질문에 대해서는 페이지 하단에 스크립트를 배치하는 것이 성능/로드 시간에 영향을 미치는지 여부에 대해서는 언급하지 않겠습니다.나는 당신이 필요한지에 대해서만 이야기할 것입니다.$(document).ready 페이지 하단에도 스크립트를 입력할 수 있습니다.

나는 당신이 당신의 스크립트에서 즉시 호출하는 함수들에서 DOM을 참조하고 있다고 가정합니다.document또는document.getElementById. . 이 [DOM 참조] 파일에 대해서만 문의하시는 것 같습니다.IOW, DOM 참조 코드에 필요한 라이브러리 스크립트 또는 스크립트(예: jQuery)를 페이지 앞에 배치해야 합니다.

질문에 답하려면: 페이지 하단에 DOM 참조 스크립트를 포함하면 아니요, 필요하지 않습니다.$(document).ready.

설명: 의 도움 없이"onload"-와 같은 관련 구현$(document).ready경험의 법칙은 다음과 같습니다. 페이지 내의 DOM 요소와 상호 작용하는 모든 코드는 참조하는 요소보다 페이지 아래쪽에 배치/포함되어야 합니다.가장 쉬운 방법은 마감 전에 해당 코드를 배치하는 것입니다.</body>여기와 여기를 보세요.또한 IE의 무서운 "Operation aborted" 오류를 해결합니다.

그렇긴 하지만, 이것은 결코 의 사용을 무효화하지 않습니다.$(document).ready객체가 로드되기 전에 객체를 참조하는 것은 DOM JavaScript에서 시작할 때 발생하는 가장 일반적인 실수 중 하나입니다(너무 많이 보아서 셀 수 없음).이것은 jQuery의 문제 해결책이며, 이 스크립트가 참조하는 DOM 요소와 관련하여 이 스크립트가 포함될 위치를 고려할 필요가 없습니다.이것은 개발자들에게 큰 승리입니다.그것은 그들이 생각해야 할 것이 하나 더 적습니다.

모든 DOM 은 어렵거나 인 경우가 (예: "DOM"을 발행하는 ).document.write통화는 그대로 유지해야 합니다.다른 경우에는 일부 템플릿을 렌더링하거나 동적 자바스크립트를 만드는 프레임워크를 사용하고 있으며, 여기서 js 앞에 포함되어야 하는 함수를 참조합니다.

DOM 를 "best practice"로 잼하는 "best window.onload은 그나그에의가려니다습졌해은러것ed다니▁by에 의해 가려졌습니다.$(document).ready충분히 문서화된 이유에 의한 구현.

이 모든 것을 종합적으로$(document).readyDOM 요소를 너무 일찍 참조하는 문제에 대한 훨씬 우수하고 실용적이며 일반적인 해결책입니다.

언급URL : https://stackoverflow.com/questions/1438883/jquery-why-use-document-ready-if-external-js-at-bottom-of-page