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

Question 1

페이지 맨 아래에로드되는 외부 파일로 모든 JS를 포함하고 있습니다. 이 파일에는 다음과 같이 정의 된 몇 가지 메서드가 있으며 ready 이벤트에서 호출합니다.

var SomeNamepsace = {};

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

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

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

그러나 ready 함수를 제거하고 메서드를 바로 호출하면 모든 것이 동일하게 작동하지만 훨씬 더 빠르게 실행됩니다. 매우 기본적인 파일에서 거의 1 초 더 빠르게 실행됩니다! 이 시점에서 문서를로드해야하므로 (모든 마크 업이 스크립트 태그 앞에 오기 때문에) 여전히 ready 이벤트를 사용하는 좋은 이유가 있습니까?

Question 2

좋은 질문입니다.

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

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

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

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

그렇다고해서 $(document).ready. 객체가로드되기 전에 참조하는 것은 DOM 자바 스크립트에서 시작할 때 가장 흔히 범하는 실수 중 하나입니다. 이것은 문제에 대한 jQuery의 해결책이며, 참조하는 DOM 요소와 관련하여이 스크립트가 어디에 포함 될지 생각할 필요가 없습니다. 이것은 개발자들에게 큰 승리입니다. 그들이 생각해야 할 것이 하나 적습니다.

또한 모든 DOM 참조 스크립트를 페이지 하단으로 이동하는 것이 어렵거나 비현실적인 경우가 많습니다 (예 : document.write호출 을 발행하는 스크립트는 그대로 두어야합니다). 다른 경우에는 일부 템플릿을 렌더링하거나 js 앞에 포함 되어야 하는 함수를 참조하는 동적 자바 스크립트 조각을 만드는 프레임 워크를 사용하고 있습니다 .

마지막으로 모든 DOM 참조 코드를에 잼하는 "모범 사례" window.onload였지만 문서 화상의 이유로$(document).ready 구현에 의해 가려졌습니다 .

이 모든 것이 $(document).readyDOM 요소를 너무 일찍 참조하는 문제에 대해 훨씬 우수하고 실용적이며 일반적인 솔루션이됩니다.