자바 스크립트 코드는 항상 HTML 문서의 헤드에로드해야합니까?

Question

자바 스크립트를로드하는 방법에 관한 담요 규칙이 있습니까? 나는 사람들이 그것이 페이지의 끝 부분에 가야한다고 말하고있는 것을보고있다.

생각하십니까?

Answer 1

글쎄, 두 가지 경우가 있습니다 (적어도) 달성하고자하는 일에 따라 다릅니다. 함수 라이브러리와 같은 스크립트에 통합 된 기능이 필요하거나 페이지로드 전 또는 도중 사용할 수있는 경우 head 태그에 JavaScript 코드를로드해야합니다. 페이지 하단에 스크립트를로드해야하는 것보다 페이지가로드 된 후에 만 ​​사용할 수있는 리소스 (DOM 리소스)가 필요한 경우 (onDOMReady 이벤트를 사용하여 해결할 수도 있음) 이는 대부분의 JavaScript 프레임 워크에서 사용할 수 있음). 결정 사항을 결정할 수있는 성능 문제가있을 수도 있습니다. 예를 들어 head 태그에 스크립트 또는 스크립트를로드하면 페이지 렌더링 속도가 느려지고 스크립트가 완전히 작동 할 때까지 렌더링 된 페이지로 기본 기능을 제공 할 수 있다면 스크립트 또는 스크립트가 맨 아래에로드되어야합니다. 당신이해야 할 일에 따라 결정됩니다.

Answer 2

문서의 끝에 그것을 놓는 생각은 문서의 전체 내용이 요소를 참조하기 전에 다운로드되었는지 확인하는 것입니다. JavaScript가 먼저로드 된 경우 문서가 준비되지 않았을 때 코드가 요소를 찾을 수 있습니다.

jQuery를 다룰 내용은 ready 기능이 문제 : DOM이 통과하고 조작 될 준비가 될 때마다

함수를 귀속 를 실행합니다.

이 아마 크게 응답을 웹 응용 프로그램의 시간을 향상시킬 수있는 이벤트 모듈, 에 포함 된 가장 중요한 기능입니다.

는 페이지 하단에 자바 스크립트 파일을 포함하여 제안 성능 고려 사항이있다 -이 자바 스크립트 파일을 다운로드하는 등 이미지, CSS, 다른 모든 HTTP 요청을 (블록 수 있다는 사실에 기인한다) 완료 될 때까지.

Answer 3

규칙은 없습니다. Js를 먼저로드하려면 머리에 넣어야합니다. 브라우저가로드하는 마지막 항목이되도록하려면 맨 아래에 넣으십시오.

JS로 쓸모있는 웹 사이트의 경우, 맨 위에 머리를 넣고 싶을 것입니다. 멋지게 저하되는 웹 사이트의 경우 Yahoo!를 권장 사항을 설정하고 페이지를 렌더링하게 한 다음 스크립트를로드하십시오.

N.B : DOM로드 전이나 후에 스크립트를 실행하는 것과 관련이 없습니다. 이 문제는 실제적인 것이 아니며 대부분 onload 또는 $ .ready와 동등한 것을 사용합니다. 이것은 파일이 실제로로드되고 실행되지 않은 때입니다.

Answer 4

문서를로드하는 중에 javascript를 사용하여 특정 논리를 실행해야하는 경우 맨 위에 최소한의 코드를 넣을 수 있습니다. 그러나 문서 준비가 완료되면 오늘날의 풍부한 웹 응용 프로그램에서 거의 모든 자바 스크립트 사용이 필요하므로 <script> 태그는 </body> 이후에 안전하게 넣을 수 있습니다.http://developer.yahoo.com/performance/rules.html

Answer 5

내가 생산에 배포 할 때 하나의 파일로 내 코드를 최소화하고자 :

여기에 매우 관련 읽기입니다. 따라서 개발하는 동안 각 JavaScript 클래스에 대해 하나의 파일을 만들고 각각을 머리에로드합니다 (, CSS 파일 이후). DOM에서 준비가되었음을 나타내는 이벤트를 브라우저에서 기다리기 때문에 JS/JS 파일을 유일한 HTML/JSP 페이지의 머리에 넣습니다.