it-gundan.com

"맨 아래에 Javascript를 입력"하면 document.ready의 목적을 무효화합니까?

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

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

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

26
DisgruntledGoat

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

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

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

30
Callan

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

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

6
Macha

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

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

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

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

참고 : 반대쪽은 스타일 시트-페이지 하단 근처의 스타일 시트는 모든 스타일 시트가 다운로드되고 문서로 이동할 때까지 점진적 렌더링을 차단합니다 HEAD은 문제를 제거합니다.


사용자를 기다리지 않고 자바 스크립트를로드하려면 깔끔한 트릭이 필요합니다. DOM createElement() 메소드를 사용하여 <script/> 요소를 만들고 닫는 직전에 페이지에 추가 할 수 있습니다 </body> 꼬리표:

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

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

3
Tom

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

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

1
Kornel