달러(약)ready(함수:{}); 페이지 하단의 vs 스크립트

달러(약)ready(함수:{}); 페이지 하단의 vs 스크립트

페이지 하단에 스크립트를 쓰는 것과 스크립트를 쓰는 것의 차이점/장점/단점은 무엇입니까?

$(document).ready(function(){});

그 자체로는 거의 없습니다. 어느 쪽이든 DOM은 당신이 운영할 준비가 되어 있을 것입니다(Google에서 이 글을 읽기 전까지는 그것에 대해 긴장했습니다).페이지 끝 트릭을 사용하면 코드가 아주 조금 더 빨리 호출될 수 있지만 문제가 되지는 않습니다.그러나 더 중요한 것은 이 선택이 JavaScript를 페이지에 연결하는 위치와 관련이 있다는 것입니다.

다음 항목을 포함하는 경우script에 태그를 달다.head그리고 의지합니다.ready브라우저가 사용자를 검색합니다.script태그를 지정할 수 있습니다.정상적인 이벤트 과정에서 브라우저는 끽끽 소리를 내며 멈춰서서 스크립트를 다운로드하고 JavaScript 인터프리터를 실행한 후 스크립트를 넘겨준 다음 인터프리터가 스크립트를 처리하는 동안 기다립니다(그리고 jQuery는 다양한 방법으로 DOM이 준비되기를 기다립니다).(일부 브라우저는 또는 속성을 지원하기 때문에 "정상적인 과정에서"라고 말합니다.script태그.)

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

최상의 로딩 시간을 얻으려면 페이지 하단에 스크립트를 배치합니다.(이것은 야후 사람들의 지침이기도 합니다.)그리고 그렇게 할 거라면, 당신이 사용할 필요가 없습니다.ready물론 당신이 원한다면 할 수 있지만요.

하지만 그에 대한 대가는 있습니다.사용자가 볼 수 있는 항목이 상호 작용할 준비가 되었는지 확인해야 합니다.다운로드 시간을 페이지가 표시된 후로 이동하면 스크립트가 로드되기 전에 사용자가 페이지와 상호 작용을 시작할 가능성이 높아집니다.그것은 그것을 넣는 것에 대한 반론 중 하나입니다.script끝에 태그를 붙입니다.문제가 되지 않는 경우가 많지만, 문제가 있는지 여부와 해결 방법을 보려면 페이지를 살펴봐야 합니다. (작은 크기의 인라인을 사용할 수 있습니다.) script의 head이 문제에 대처하기 위해 문서 전체의 이벤트 처리기를 설정합니다.이렇게 하면 로드 시간이 단축되지만 너무 이른 시간에 작업을 수행하려고 하면 작업자에게 이를 알려주거나 원하는 작업을 대기열에 저장하여 전체 스크립트가 준비되면 작업을 수행할 수 있습니다.

페이지가 분산되어 로드 속도가 느려집니다.$(document).ready()먼저 jQuery를 동기화하여 로드해야 하므로 DOM 전체에 걸쳐 스크립트가 생성됩니다.

$ = jQuery그래서 당신은 사용할 수 없습니다.$jQuery를 처음 로드하지 않고 스크립트에 저장할 수 있습니다.이 접근 방식은 페이지 시작 부분 근처에서 jQuery를 로드하도록 강제하며, 이는 jQuery가 완전히 다운로드될 때까지 페이지 로드를 중지합니다.

은 다니없습.async에 jQuery를 합니다.$(document).ready()으로 로드되기 를 발생시킵니다. 는 다시 "" "jQuery" "라는 오류가 발생하기 때문입니다 왜냐하면,$아직 정의되지 않았습니다.

그렇긴 하지만, 시스템을 속이는 방법이 있습니다.으로 설정 본설정기$어내는함같은와수밀을 .$(document).ready()기능을 큐/어레이로 변환합니다.를 통해 의 그런다페음이지하 jQuery를드다실니반합행여를 합니다.$(document).ready()한번에 하나씩.이렇게 맨로 연기할 수 이게하면 jQuery를이단으로연기할다있수할니를 사용할 수 .$DOM에서 그 위에.저는 개인적으로 이것이 얼마나 잘 작동하는지 테스트하지 않았지만, 그 이론은 타당합니다.이 아이디어는 한동안 존재해 왔지만, 저는 이 아이디어가 구현되는 것을 거의 보지 못했습니다.하지만 좋은 생각인 것 같습니다.

http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax

언급URL : https://stackoverflow.com/questions/6026645/document-readyfunction-vs-script-at-the-bottom-of-page