답변:
모든 스크립트는 마지막에로드해야합니다
거의 모든 경우에있어 모든 스크립트 참조를 페이지의 끝에 페이지 바로 앞에 배치하는 것이 가장 좋습니다 </body>.
템플릿 문제 및 기타 사항으로 인해 그렇게 할 수없는 경우 deferHTML을 다운로드 한 후 브라우저가 스크립트를 다운로드 할 수 있도록 속성을 사용 하여 스크립트 태그를 장식하십시오 .
<script src="my.js" type="text/javascript" defer="defer"></script>가장자리 케이스
일부 가장자리 경우 그러나, 당신은 페이지 깜박임 또는 일반적으로 단순히 귀하의 jQuery 스크립트 참조를 배치하여 해결할 수있는 페이지로드시 다른 유물 발생할 수있는 경우가 있습니다 <head>태그 없이defer 속성을. 이러한 경우에는 jQuery UI 및 기능의 일부로 DOM을 수정하는 jCarousel 또는 Treeview와 같은 기타 애드온이 포함됩니다.
추가 경고
폴리 필과 같이 DOM 또는 CSS 전에로드해야하는 라이브러리가 있습니다. Modernizr은 헤드 태그에 배치해야하는 라이브러리 중 하나 입니다.
<head>있습니다. 마크 업이 콘텐츠를 정렬하는 jQuery 플러그인에 의존하는 경우 플러그인이로드 될 때까지 웹 페이지에 펑키 마크 업이 표시되므로 페이지 하단에 플러그인 참조를 배치하는 것은 의미가 없습니다. 규칙은 더 이상 작동하지 않을 때까지 따라야하며, 이때 규칙을 어기 게됩니다.
스크립트로 인한 문제는 병렬 다운로드를 차단한다는 것입니다. HTTP / 1.1 사양에서는 브라우저가 호스트 이름 당 2 개 이하의 구성 요소를 동시에 다운로드 할 것을 제안합니다. 여러 호스트 이름에서 이미지를 제공하는 경우 두 개 이상의 다운로드가 동시에 발생할 수 있습니다. 그러나 스크립트를 다운로드하는 동안 브라우저는 다른 호스트 이름에서도 다른 다운로드를 시작하지 않습니다. 어떤 상황에서는 스크립트를 맨 아래로 옮기기가 쉽지 않습니다. 예를 들어 스크립트가 document.write를 사용하여 페이지 내용의 일부를 삽입하면 페이지에서 더 아래로 이동할 수 없습니다. 범위 지정 문제가있을 수도 있습니다. 대부분의 경우 이러한 상황을 해결하는 방법이 있습니다.
종종 나타나는 대체 제안은 지연된 스크립트를 사용하는 것입니다. DEFER 속성은 스크립트에 document.write가 포함되어 있지 않으며 브라우저에서 렌더링을 계속할 수있는 단서입니다. 불행히도 Firefox는 DEFER 속성을 지원하지 않습니다. Internet Explorer에서 스크립트가 지연 될 수 있지만 원하는 만큼은 아닙니다. 스크립트를 연기 할 수 있으면 페이지 하단으로 이동할 수도 있습니다. 그러면 웹 페이지가 더 빨리로드됩니다.
편집 : Firefox는 버전 3.6 이후 DEFER 속성을 지원합니다.
출처 :
물론 CDN을 통해 헤드에 jQuery 자체 만로드하십시오.
왜? 일부 시나리오에서는 jQuery 종속 코드가 포함 된 부분 템플리트 (예 : 아약스 로그인 양식 스 니펫)를 포함 할 수 있습니다. jQuery가 페이지 하단에로드되면 "$ is not defined"오류가 발생합니다.
물론이 방법을 해결할 수있는 방법이 있습니다 (예 : JS를 포함하지 않고 하단로드 js 번들에 추가하는 것과 같이). 느리게로드 된 js의 자유를 잃고 jQuery 종속 코드를 원하는 곳에 배치 할 수있는 이유는 무엇입니까? Javascript 엔진은 jQuery가로드되는 것과 같은 종속성이 충족되는 한 DOM에서 코드가 어디에 있는지 신경 쓰지 않습니다.
공통 / 공유 js 파일의 경우 예를 들어 앞에 배치하십시오 </body>. 그러나 예외는 예외입니다. 예를 들어 html의 해당 지점에서 jQuery 종속 스 니펫 또는 파일 참조를 유지하는 것이 응용 프로그램 유지 관리 측면에서 실제로 의미가 있습니다.
헤드에 jquery를로드하는 성능 적중이 없습니다. 지구상의 어떤 브라우저가 캐시에 jQuery CDN 파일을 가지고 있지 않습니까?
jQuery를 머리에 붙이고 js의 자유를 통치하십시오.
2%, 말, 절반은 처음으로 페이지가로드되기 전에 떠날 것이다. 이런 식으로 1%방문자를 잃지 만 잠재적으로 많은 개발 시간과 문제를 줄일 수 있습니다. 이것이 귀하의 비즈니스 모델에 맞는지 확인하십시오.
님 부즈 는 관련된 문제에 대한 아주 좋은 설명을 제공하지만 최종 답변은 귀하의 페이지에 달려 있다고 생각합니다.
이미지 없이는 이해가되지 않는 페이지가 있지만, 중요하지 않은 사소한 스크립트 만 있습니다. 이 경우 스크립트를 맨 아래에 두는 것이 좋습니다. 따라서 사용자는 이미지를 더 빨리보고 페이지를 이해할 수 있습니다. 다른 페이지는 스크립팅을 통해 작동합니다. 이 경우 이미지가있는 작동하지 않는 페이지보다 이미지가없는 작동중인 페이지를 갖는 것이 좋습니다. 따라서 스크립트를 맨 위에 두는 것이 좋습니다.
고려해야 할 또 다른 사항은 스크립트가 일반적으로 이미지보다 작다는 것입니다. 물론 이것은 일반화이며 페이지에 적용되는지 확인해야합니다. 그렇다면 이미지가 스크립트를 지연시킬만큼 이미지를 지연시키지 않기 때문에 그것들을 경험에 근거하여 (즉, 달리할만한 이유가 없다면) 저에게 먼저 주장해야합니다. 마지막으로, 스크립트를 맨 앞에 놓는 것이 훨씬 쉽습니다. 스크립트를 사용해야 할 때 아직로드되었는지에 대해 걱정할 필요가 없기 때문입니다.
요약하면 기본적으로 스크립트를 맨 위에 배치하는 경향이 있으며 페이지가 완료된 후 스크립트를 맨 아래로 이동할 가치가 있는지 여부 만 고려합니다. 그것은 최적화입니다-나는 조기에하고 싶지 않습니다.
표준 연습은 모든 스크립트를 페이지 맨 아래에 배치하는 것이지만 여러 jQuery 플러그인과 함께 ASP.NET MVC를 사용 <head>하고 마스터 섹션에 jQuery 스크립트를 넣으면 더 잘 작동한다는 것을 알았습니다. 페이지.
필자의 경우 스크립트가 페이지 하단에 있으면 페이지를로드 할 때 발생하는 아티팩트가 있습니다. jQuery TreeView 플러그인을 사용하고 있으며 처음에 스크립트가로드되지 않으면 플러그인이 필요한 CSS 클래스없이 트리가 렌더링됩니다. 따라서 페이지가 처음로드 될 때이 재미있는 엉망이 생기고 TreeView가 올바르게 렌더링됩니다. 아주 안 좋아. <head>마스터 페이지 의 섹션에 jQuery 플러그인을 넣으면 이 문제가 해결됩니다.
@Html.Action동적 출력에 결과를 기록, 내 부분으로 부여합니다 $ is undefined부분을로드 ( 'Url.Action @') 내가 대신 .load 사용해야 의미한다. 그러나 이것은 추가 요청으로 인해 혼란을 낳습니다. 입력 내용을 기반으로 마스터 페이지에서 jQuery를 RenderBody () 위로 이동합니다.
거의 모든 웹 사이트가 여전히 헤더 : D에 Jquery 및 기타 자바 스크립트를 배치하지만 stackoverflow.com도 확인하십시오.
또한 신체의 끝 태그 앞에 착용하는 것이 좋습니다. 어느 장소에 배치 한 후 로딩 시간을 확인할 수 있습니다. 스크립트 태그는 웹 페이지를 일시 중지하여 추가로로드합니다.
바닥 글에 자바 스크립트를 배치 한 후 자바 스크립트가로드 될 때까지 웹 페이지가 비정상적으로 보일 수 있으므로 헤더 섹션에 CSS를 배치하십시오.
나에게 jQuery는 조금 특별하다. 아마도 표준에 대한 예외 일 수 있습니다. 그것에 의존하는 다른 스크립트가 너무 많아서 나중에로드하는 다른 스크립트가 의도대로 작동하도록 조기에로드하는 것이 중요합니다. 다른 사람이 지적 했듯이이 페이지조차도 헤드 섹션에 jQuery를로드합니다.