Jquery 코드가 머리글이나 바닥 글에 들어가야합니까?
Jquery 코드 (또는 별도의 Jquery 파일)를 넣는 가장 좋은 장소는 어디입니까? 바닥 글에 넣으면 페이지가 더 빨리로드됩니까?
모든 스크립트는 마지막에로드해야합니다
거의 모든 경우에있어 모든 스크립트 참조를 페이지의 끝에 페이지 바로 앞에 배치하는 것이 가장 좋습니다 </body>.
템플릿 문제 및 기타 사항으로 인해 그렇게 할 수없는 경우 deferHTML을 다운로드 한 후 브라우저가 스크립트를 다운로드 할 수 있도록 속성을 사용 하여 스크립트 태그를 장식하십시오 .
<script src="my.js" type="text/javascript" defer="defer"></script>
가장자리 케이스
일부 가장자리 경우 그러나, 당신은 페이지 깜박임 또는 일반적으로 단순히 귀하의 jQuery 스크립트 참조를 배치하여 해결할 수있는 페이지로드시 다른 유물 발생할 수있는 경우가 있습니다 <head>태그 없이defer 속성을. 이러한 경우에는 jQuery UI 및 jCarousel 또는 Treeview와 같은 다른 애드온을 포함하여 DOM을 기능의 일부로 수정합니다.
추가 경고
폴리 필과 같이 DOM 또는 CSS 전에로드해야하는 라이브러리가 있습니다. Modernizr은 헤드 태그에 배치해야하는 라이브러리 중 하나 입니다.
스크립트로 인한 문제는 병렬 다운로드를 차단한다는 것입니다. 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의 자유를 통치하십시오.
님 부즈 는 관련된 문제에 대한 아주 좋은 설명을 제공하지만 최종 답변은 귀하의 페이지에 달려 있다고 생각합니다.
이미지 없이는 이해할 수없는 페이지가 있지만 사소한 비 필수 스크립트 만 있습니다. 이 경우 스크립트를 맨 아래에 두는 것이 좋습니다. 따라서 사용자는 이미지를 더 빨리보고 페이지를 이해할 수 있습니다. 다른 페이지는 스크립팅을 통해 작동합니다. 이 경우 이미지가있는 작동하지 않는 페이지보다 이미지가없는 작동중인 페이지를 갖는 것이 좋습니다. 따라서 스크립트를 맨 위에 두는 것이 좋습니다.
고려해야 할 또 다른 사항은 스크립트가 일반적으로 이미지보다 작다는 것입니다. 물론 이것은 일반화이며 페이지에 적용되는지 확인해야합니다. 그렇다면 이미지가 스크립트를 지연시킬만큼 이미지를 지연시키지 않기 때문에 그것들을 경험에 근거하여 (즉, 달리할만한 이유가 없다면) 저에게 먼저 주장해야합니다. 마지막으로, 스크립트를 맨 앞에 놓는 것이 훨씬 쉽습니다. 스크립트를 사용해야 할 때 아직로드되었는지 걱정할 필요가 없기 때문입니다.
요약하면 기본적으로 스크립트를 맨 위에 배치하는 경향이 있으며 페이지가 완료된 후 스크립트를 맨 아래로 이동할 가치가 있는지 여부 만 고려합니다. 그것은 최적화입니다-나는 조기에하고 싶지 않습니다.
대부분의 jquery 코드는 문서 준비 상태에서 실행되며 페이지 끝까지 발생하지 않습니다. 또한 자바 스크립트 파싱 / 실행으로 페이지 렌더링이 지연 될 수 있으므로 모든 자바 스크립트를 페이지 하단에 배치하는 것이 가장 좋습니다.
표준 연습은 모든 스크립트를 페이지 하단에 배치하는 것이지만 많은 jQuery 플러그인과 함께 ASP.NET MVC를 사용 <head>하며 마스터 섹션에 jQuery 스크립트를 넣으면 더 잘 작동한다는 것을 알았습니다. 페이지.
필자의 경우 스크립트가 페이지 하단에 있으면 페이지가로드 될 때 발생하는 아티팩트가 있습니다. jQuery TreeView 플러그인을 사용하고 있으며 처음에 스크립트가로드되지 않으면 플러그인이 필요한 CSS 클래스없이 트리가 렌더링됩니다. 따라서 페이지가 처음로드 될 때이 재미있는 엉망이 생기고 TreeView가 올바르게 렌더링됩니다. 아주 안 좋아. <head>마스터 페이지 의 섹션에 jQuery 플러그인을 넣으면 이 문제가 해결됩니다.
거의 모든 웹 사이트가 여전히 Jquery 및 기타 자바 스크립트를 헤더 : D에 배치하지만 stackoverflow.com을 확인하십시오.
또한 신체의 끝 태그 앞에 착용하는 것이 좋습니다. 어느 장소에 배치 한 후 로딩 시간을 확인할 수 있습니다. 스크립트 태그는 웹 페이지를 일시 중지하여 추가로로드합니다.
and after placing javascript on footer, you may get unusual looks of your webpage until it loads javascript, so place css on your header section.
Just before </body> is the best place according to Yahoo Developer Network's Best Practices for Speeding Up Your Web Site this link, it makes sense.
The best thing to do is to test by yourself.
For me jQuery is a little bit special. Maybe an exception to the norm. There are so many other scripts that rely on it, so its quite important that it loads early so the other scripts that come later will work as intended. As someone else pointed out even this page loads jQuery in the head section.
참고URL : https://stackoverflow.com/questions/2105327/should-jquery-code-go-in-header-or-footer
'IT story' 카테고리의 다른 글
| 자세한 500 오류 메시지, ASP + IIS 7.5 (0) | 2020.05.17 |
|---|---|
| 테이블 열 너비 설정 (0) | 2020.05.17 |
| 각 사용자의 최신 레코드 날짜에 대해 SQL을 쿼리하는 방법 (0) | 2020.05.17 |
| Groovy Shell 경고“prefs 루트 노드를 열거 나 만들 수 없습니다…” (0) | 2020.05.17 |
| 'any'대 'Object' (0) | 2020.05.17 |