[javascript] $ (문서) .ready (function () {}); 페이지 하단의 스크립트

그 자체로는 거의 DOM이 작동 할 준비가되어있을 것입니다 ( Google에서 이것을 읽을 때까지 나는 그것에 대해 긴장했습니다 ). 페이지 끝 트릭을 사용하면 코드가 조금 더 빨리 호출 될 수 있지만 아무 문제가 없습니다. 그러나 더 중요한 것은이 선택이 JavaScript를 페이지에 링크하는 위치와 관련이 있다는 것입니다.

에 script태그 를 포함 head하고에 의존하는 ready경우 브라우저 script는 사용자에게 아무것도 표시하기 전에 태그를 발견합니다 . 정상적인 이벤트 과정에서 브라우저는 갑자기 멈추고 스크립트를 다운로드하고 JavaScript 인터프리터를 실행하고 스크립트를 전달한 다음 인터프리터가 스크립트를 처리하는 동안 기다립니다 (그런 다음 jQuery가 다양한 방식으로 감시합니다). DOM 준비). (일부 브라우저 는 태그 의 async또는defer 속성을 지원하기 때문에 “정상적인 과정에서”라고 말합니다 script.)

요소 script끝에 태그 를 포함 body하면 브라우저는 페이지가 대부분 사용자에게 이미 표시 될 때까지 모든 작업을 수행하지 않습니다. 이렇게하면 페이지에 대한 인식 된로드 시간이 향상됩니다.

따라서 가장 잘 인식되는로드 시간을 얻으려면 페이지 하단에 스크립트를 넣으십시오. (이것은 또한 Yahoo 사람들의 가이드 라인입니다 .) 그리고 만약 당신이 그렇게하려고한다면 ready, 물론 당신이 좋아한다면 할 수 있지만, 사용할 필요가 없습니다 .

하지만 이에 대한 대가가 있습니다. 사용자가 볼 수있는 것들이 상호 작용할 준비가되었는지 확인해야합니다. 다운로드 시간을 페이지가 크게 표시된 후로 이동하면 스크립트가로드되기 전에 사용자가 페이지와 상호 작용하기 시작할 가능성이 높아집니다. 그것은 script태그를 끝에 넣는 것에 대한 반론 중 하나입니다 . 종종 문제가되지는 않지만 페이지가 맞는지, 그렇다면 어떻게 처리할지 확인해야합니다. (이에 대처하기 위해 문서 전체 이벤트 핸들러를 설정 하는 작은 인라인 script 요소를에 넣을 수 있습니다 head. 이렇게하면로드 시간이 향상되지만 경우 그들은 너무 일찍 무언가를하려고합니다. 당신은 그들에게 그것을 말하거나, 그들이하고 싶은 일을 대기열에 넣고 전체 스크립트가 준비되었을 때 그것을 할 수 있습니다.)