페이지 하단에 스크립트 작성과 스크립트 작성의 차이점 / 장점 / 단점은 무엇입니까?
$(document).ready(function(){});답변:
그 자체로는 거의 DOM이 작동 할 준비가되어있을 것입니다 ( Google에서 이것을 읽을 때까지 나는 그것에 대해 긴장했습니다 ). 페이지 끝 트릭을 사용하면 코드가 조금 더 빨리 호출 될 수 있지만 아무 문제가 없습니다. 그러나 더 중요한 것은이 선택이 JavaScript를 페이지에 링크하는 위치와 관련이 있다는 것입니다.
에 script태그 를 포함 head하고에 의존하는 ready경우 브라우저 script는 사용자에게 아무것도 표시하기 전에 태그를 발견합니다 . 정상적인 이벤트 과정에서 브라우저는 갑자기 멈추고 스크립트를 다운로드하고 JavaScript 인터프리터를 실행하고 스크립트를 전달한 다음 인터프리터가 스크립트를 처리하는 동안 기다립니다 (그런 다음 jQuery가 다양한 방식으로 감시합니다). DOM 준비). (일부 브라우저 는 태그 의 async또는defer 속성을 지원하기 때문에 "정상적인 과정에서"라고 말합니다 script.)
요소 script끝에 태그 를 포함 body하면 브라우저는 페이지가 대부분 사용자에게 이미 표시 될 때까지 모든 작업을 수행하지 않습니다. 이렇게하면 페이지에 대한 인식 된로드 시간이 향상됩니다.
따라서 가장 잘 인식되는로드 시간을 얻으려면 페이지 하단에 스크립트를 넣으십시오. (이것은 또한 Yahoo 사람들의 가이드 라인입니다 .) 그리고 만약 당신이 그렇게하려고한다면 ready, 물론 당신이 좋아한다면 할 수 있지만, 사용할 필요가 없습니다 .
하지만 이에 대한 대가가 있습니다. 사용자가 볼 수있는 것들이 상호 작용할 준비가되었는지 확인해야합니다. 다운로드 시간을 페이지가 크게 표시된 후로 이동하면 스크립트가로드되기 전에 사용자가 페이지와 상호 작용하기 시작할 가능성이 높아집니다. 그것은 script태그를 끝에 넣는 것에 대한 반론 중 하나입니다 . 종종 문제가되지는 않지만 페이지가 맞는지, 그렇다면 어떻게 처리할지 확인해야합니다. (이에 대처하기 위해 문서 전체 이벤트 핸들러를 설정 하는 작은 인라인 script 요소를에 넣을 수 있습니다 head. 이렇게하면로드 시간이 향상되지만 경우 그들은 너무 일찍 무언가를하려고합니다. 당신은 그들에게 그것을 말하거나, 그들이하고 싶은 일을 대기열에 넣고 전체 스크립트가 준비되었을 때 그것을 할 수 있습니다.)
$(document).ready()jQuery를 먼저 동기식으로 로드 해야하므로 DOM 전체에 스크립트 를 분산시켜 페이지로드 속도가 느려집니다 .
$ = jQuery. 따라서 $먼저 jQuery를로드하지 않고는 스크립트에서 사용할 수 없습니다 . 이 접근 방식을 사용하면 페이지 시작 부분에 jQuery를로드해야합니다. 그러면 jQuery가 완전히 다운로드 될 때까지 페이지로드가 중지됩니다 .
async대부분의 경우 $(document).ready()jQuery가 완전히 비동기로로드되기 전에 스크립트가 실행을 시도하고 다시 $아직 정의되지 않았기 때문에 오류가 발생 하기 때문에 jQuery를로드 할 수 없습니다 .
즉, 시스템을 속일 수있는 방법이 있습니다. 기본적으로 함수를 대기열 / 배열로 $푸시하는 함수와 동일하게 설정합니다 $(document).ready(). 그런 다음 페이지 하단에서 jQuery를로드 한 다음 대기열을 반복하고 $(document).ready()한 번에 하나씩 실행합니다 . 이를 통해 jQuery를 페이지 하단으로 연기 할 수 있지만 $DOM에서 그 위에 계속 사용할 수 있습니다 . 나는 개인적으로 이것이 얼마나 잘 작동하는지 테스트하지 않았지만 이론은 건전합니다. 아이디어는 한동안 존재했지만 구현되는 것을 거의 보지 못했습니다. 그러나 그것은 좋은 생각처럼 보입니다.
http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax