“맨 아래에 Javascript를 넣는 것”이 document.ready의 목적을 무효화합니까?

Javascript를 페이지 맨 아래에 두는 것이 좋지만 jQuery를 사용하는 경우 DOM 이로 드 될 때 실행 목적을 상실하지 않습니까?

예를 들어 드롭 다운 메뉴가 있으면 나머지 페이지가 모두로드 될 때까지 드롭 다운이 표시되지 않습니다. 또한 점진적 향상을 염두에두고 개발하려고 시도하므로 CSS 대신 jQuery로 숨겨진 요소가있을 수 있습니다 (JS 이외의 사용자가 볼 수 있음).

아마도 행복한 매체가 있습니까?

Document.ready는 JavaScript를 실행하기 전에 DOM이로드되기를 기다립니다 (http://www.learningjquery.com/2006/09/introducing-document-ready).

맨 아래에 배치한다는 아이디어는 JS에 문제가 있거나 사람이 느리게 연결되어있는 경우 나머지 페이지가 먼저로드되고 "중지되지 않음"을 의미합니다.

JS는 시작 또는 완료 여부에 관계없이 모든 것이로드 될 때 여전히 실행됩니다.

자바 스크립트를 맨 아래에 두는 것은 다른 페이지 컨텐츠 (특히 텍스트)가 자바 스크립트보다 먼저로드되므로 사용자가 느리게 연결될 경우 JS가로드되기를 기다리지 않습니다.

브라우저가 페이지에 대한 DOM 준비를 마치면 호출되므로 document.ready에는 영향을 미치지 않습니다. 어느 쪽이든, 모든 것이 여전히 먼저로드되어야합니다.

스크립트는 HTML로드가 완료 될 때까지 실제로 사용되지 않습니다. 스크립트는 HTML이로드 될 때까지 DOM을 변경할 수 없습니다. document.readyDOM이로드되기를 기다립니다. 따라서 스타일 시트와 같은 중요한 것들을 견딜 수는 없습니다.

스크립트를 페이지 하단 ( </body>태그 이전 )에 놓아 HTML과 CSS를 가능한 빨리 사용자에게 가져 오십시오. 브라우저는 페이지를 훨씬 빠르게 렌더링 할 수 있으며 스크립트를 다운로드 할 때까지 기다리는 동안 사용자가 빈 페이지를 쳐다 보지 않고 스크립트를로드 할 수 있습니다.

브라우저가 점진적으로 페이지를 렌더링하는 동안 스크립트 태그 (예 : 외부 Javascript 파일)에 도달하면 모든 것이 중지됩니다 . 스크립트는 올바른 방법이 있습니다. 스크립트를 다운로드하는 동안 브라우저는 다른 다운로드를 시작하지 않습니다. 즉, 다른 호스트 이름에서도 이미지 및 스타일 시트 및 기타 병렬 다운로드가 차단됩니다.

페이지 하단에 스크립트를 배치 할 경우의 단점은 스크립트가 초기화되기 전에 페이지가 렌더링되기 때문에, 특히 자바 스크립트가 준비되기 전에 빠른 클릭 기가 사이트와 상호 작용할 수 있다는 것입니다.

참고 : 스타일 시트-페이지 하단 근처에있는 스타일 시트는 모든 스타일 시트를 다운로드하여 문서로 이동시킬 때까지 점진적 렌더링을 차단 HEAD합니다.

사용자를 기다리지 않고 자바 스크립트를로드하는 깔끔한 트릭이 있습니다 <script/>.DOM createElement()메소드를 사용하여 요소를 작성 하고 닫기 </body>태그 직전에 페이지에 추가 할 수 있습니다 .

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);

새 <script/>요소가 실제로 페이지에 추가 될 때까지 브라우저가 js 스크립트 다운로드를 시작하지 않습니다 . 다운로드가 완료되면 브라우저는 포함 된 Javascript 코드를 해석합니다.

예. 맨 아래에 스크립트를 넣으면 doc.ready( DOMContentLoaded이벤트)가 더 이상 필요하지 않습니다. 모든 선행 DOM이로드 된 후에 스크립트가 실행됩니다.

결국 스크립트는 성능을 향상 시키므로 (CSS 및 이미지의 HTML 구문 분석 및로드는 스크립트에 의해 차단되지 않습니다) 스크립트 대신을 사용하는 것이 좋습니다 doc.ready.