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

Program / 글쓴이

페이지 맨 아래에로드되는 외부 파일로 모든 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 이벤트를 사용하는 좋은 이유가 있습니까?

답변

좋은 질문입니다.

전체 “페이지 하단에 스크립트 삽입”조언과 해결하려는 문제에 대해 약간의 혼란이 있습니다. 이 질문에 대해서는 페이지 하단에 스크립트를 두는 것이 성능 /로드 시간에 영향을 미치는지 여부에 대해 이야기하지 않을 것입니다. $(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 요소를 너무 일찍 참조하는 문제에 대해 훨씬 우수하고 실용적이며 일반적인 솔루션이됩니다.

답변