Jquery 코드는 머리글에 넣어야 합니까 아니면 바닥글에 넣어야 합니까?
Jquery 코드(또는 별도의 Jquery 파일)를 저장하기에 가장 좋은 위치는 어디입니까?바닥글에 넣으면 페이지가 더 빨리 읽히나요?
스크립트로 인해 발생하는 문제는 병렬 다운로드를 차단한다는 것입니다.HTTP/1.1 사양은 브라우저가 호스트 이름당 두 개 이하의 구성 요소를 병렬로 다운로드할 것을 제안합니다.여러 호스트 이름에서 이미지를 제공하는 경우 두 개 이상의 다운로드가 동시에 발생할 수 있습니다.그러나 스크립트가 다운로드되는 동안 브라우저는 다른 호스트 이름에서도 다른 다운로드를 시작하지 않습니다.경우에 따라 스크립트를 맨 아래로 이동하는 것이 쉽지 않습니다.예를 들어 스크립트가 문서를 사용하는 경우.페이지 내용의 일부를 삽입하기 위해 작성합니다. 페이지에서 아래로 이동할 수 없습니다.범위 지정 문제도 있을 수 있습니다.대부분의 경우 이러한 상황을 해결할 수 있는 방법이 있습니다.
자주 등장하는 대안으로 지연된 스크립트를 사용하는 것이 있습니다.DEER 속성은 스크립트에 문서가 없음을 나타냅니다.쓰기, 그리고 브라우저가 계속 렌더링할 수 있는 단서입니다.안타깝게도 Firefox는 DEER 속성을 지원하지 않습니다.Internet Explorer(인터넷 익스플로러)에서 스크립트는 지연될 수 있지만 원하는 만큼 지연되지는 않습니다.스크립트를 연기할 수 있는 경우 페이지 하단으로 이동할 수도 있습니다.그러면 웹 페이지를 더 빨리 로드할 수 있습니다.
편집: Firefox는 버전 3.6부터 DEER 특성을 지원합니다.
출처:
- http://www.w3schools.com/tags/att_script_defer.asp 이상:
- http://caniuse.com/ #cript=script-messages
모든 스크립트를 마지막으로 로드해야 합니다.
즉에, 모스트페의끝지이참를, ▁before,▁in▁all▁refe▁page 바로 앞에 놓는 것이 가장 좋습니다.</body>.
템플릿 문제 등으로 인해 이 작업을 수행할 수 없는 경우 스크립트 태그를 다음과 같이 장식합니다.deferHTML이 다운로드된 후 브라우저가 스크립트를 다운로드하도록 알 수 있는 속성:
<script src="my.js" type="text/javascript" defer="defer"></script>
모서리 케이스
할 수 있는 사례가 , 를 그러페깜동페안나크스박일이립있에사있수경습니다지다례도할는험아를트있팩티른수는에참해배할트를조치하여결나이로적반를지으이지거가는드하로▁the▁there▁▁cases▁by▁refe,▁be▁duringqu▁simply▁placing▁which▁your▁solved▁flick▁can▁j▁usually▁you▁are에▁however▁page▁where,있사니있수습▁other▁artifacts▁some▁inrences▁edge그다▁or지례도경ience▁page<head>태그 없이defer에는 및 기능이 포함됩니다.이러한 경우에는 jQuery UI 및 기능의 일부로 DOM을 수정하는 jCarousel 또는 Treeview와 같은 기타 추가 기능이 포함됩니다.
추가 주의사항
DOM 또는 CSS 이전에 로드해야 하는 일부 라이브러리(예: 폴리필)가 있습니다.Modernizr은 헤드 태그에 반드시 배치해야 하는 그런 라이브러리 중 하나입니다.
물론 CDN을 통해 jQuery 자체를 헤드에만 로드합니다.
왜냐고요? 일부 시나리오에서는 jQuery 종속 코드가 포함된 부분 템플릿(예: ajax 로그인 양식 스니펫)을 포함할 수 있습니다. jQuery가 페이지 하단에 로드되면 "$ is not defined" 오류가 나타납니다.
물론 이 문제를 해결할 수 있는 방법이 있습니다(JS를 포함하지 않고 부하가 낮은 js 번들에 추가하는 것과 같은). 하지만 jQuery 종속 코드를 원하는 곳에 배치할 수 있는 게으른 js의 자유를 왜 잃을까요?자바스크립트 엔진은 (jQuery가 로드되는 것과 같은) 종속성이 충족되는 한 DOM에서 코드가 어디에 있는지 상관하지 않습니다.
파일의 , "/"js 파일, ", ", " 앞에 합니다.</body>그러나 예외적으로 응용프로그램 유지관리 측면에서 jQuery 종속 스니펫 또는 파일 참조를 html의 해당 지점에 바로 고정하는 것이 타당한 경우에는 그렇게 합니다.
헤드에 jQuery를 로드하는 성능 히트가 없습니다. 캐시에 jQuery CDN 파일이 아직 없는 브라우저는 무엇입니까?
아무것도 아닌 것에 대해 많은 소란을 피우며, jQuery를 머리에 꽂고 당신의 js 자유가 지배하도록 하라.
Nimbuz는 관련된 문제에 대해 매우 좋은 설명을 제공하지만, 최종 답변은 사용자가 더 빨리 가질 수 있도록 하는 것이 무엇이 더 중요한지에 달려 있다고 생각합니다. 스크립트 또는 이미지?
이미지가 없으면 의미가 없지만 중요하지 않은 사소한 스크립팅만 있는 페이지도 있습니다.이 경우 사용자가 이미지를 더 빨리 보고 페이지를 이해할 수 있도록 스크립트를 맨 아래에 두는 것이 좋습니다.다른 페이지는 스크립팅을 사용하여 작동합니다.그런 경우에는 이미지가 있는 비작업 페이지보다 이미지가 없는 작업 페이지가 더 낫기 때문에 스크립트를 맨 위에 놓는 것이 좋습니다.
고려해야 할 또 다른 사항은 스크립트가 일반적으로 이미지보다 작다는 것입니다.물론, 이것은 일반화이며 당신의 페이지에 적용되는지 여부를 확인해야 합니다.만약 그렇다면, 저에게 그것은 경험칙으로 그것들을 우선시하는 것에 대한 주장입니다.이미지가 스크립트를 지연시키는 것만큼 이미지를 지연시키지 않기 때문에 다른 이유는 이미지가 스크립트를 지연시키지 않기 때문입니다.마지막으로 스크립트를 맨 위에 배치하는 것이 훨씬 쉽습니다. 스크립트를 사용해야 할 때 아직 로드 여부에 대해 걱정할 필요가 없기 때문입니다.
요약하자면, 저는 기본적으로 스크립트를 맨 위에 놓고 페이지가 완료된 후에 스크립트를 맨 아래로 이동할 가치가 있는지만 고려하는 경향이 있습니다.그것은 최적화입니다 - 그리고 저는 그것을 너무 일찍 하고 싶지 않습니다.
대부분의 jquery 코드는 문서 준비 시 실행되며, 이는 페이지가 끝날 때까지 발생하지 않습니다.또한 Javascript 구문 분석/실행으로 페이지 렌더링이 지연될 수 있으므로 모든 Javascript를 페이지 하단에 배치하는 것이 좋습니다.
일반적으로 모든 스크립트를 페이지 맨 아래에 배치하는 것이 일반적이지만, 저는 ASP를 사용합니다.이 있는 MVC, 즉 MVC에 내 jQuery 스크립트를 모든 이 더 잘 작동한다는 을 알게 .<head>마스터 페이지의 섹션입니다.
제 경우, 스크립트가 페이지 하단에 있을 경우 페이지가 로드될 때 발생하는 아티팩트가 있습니다.저는 jQuery TreeView 플러그인을 사용하고 있으며 스크립트가 처음에 로드되지 않으면 플러그인에 의해 부과되는 필수 CSS 클래스 없이 트리가 렌더링됩니다.따라서 페이지가 처음 로드되고 트리뷰가 제대로 렌더링될 때 재미있어 보이는 혼란이 발생합니다.너무 안 좋아요.을 jQuery에 <head>마스터 페이지의 섹션에서는 이 문제를 해결합니다.
비록 거의 모든 웹사이트들이 여전히 Jquery와 다른 자바스크립트를 헤더 :D에 배치하고 있지만, 심지어 stackoverflow.com 을 확인하세요.
저는 또한 당신이 바디의 끝 태그 앞에 착용하는 것을 제안합니다.두 곳 모두 적재 후 적재 시간을 확인할 수 있습니다.스크립트 태그가 웹 페이지를 일시 중지하여 추가로 로드합니다.
그리고 바닥글에 Javascript를 배치한 후 Javascript를 로드할 때까지 웹 페이지의 특이한 모양을 볼 수 있으므로 머리글 섹션에 CSS를 배치합니다.
저에게 jQuery는 조금 특별합니다.아마도 일반적인 경우에는 예외일 것입니다.이 스크립트에 의존하는 다른 스크립트가 너무 많기 때문에 나중에 제공되는 다른 스크립트가 의도한 대로 작동하도록 일찍 로드하는 것이 매우 중요합니다.다른 사람이 지적했듯이 이 페이지에서도 헤드 섹션에 jQuery를 로드합니다.
방금 전에</body> Yahoo Developer Network의 웹 사이트 속도 향상을 위한 모범 사례에 따르면 이 링크가 가장 적합한 장소입니다.
가장 좋은 것은 스스로 테스트하는 것입니다.
언급URL : https://stackoverflow.com/questions/2105327/should-jquery-code-go-in-header-or-footer
'bestsource' 카테고리의 다른 글
| JavaScript로 브라우저에서 Android 전화기 회전 감지 (0) | 2023.08.12 |
|---|---|
| 봄에 어떤 종류의 "이벤트 버스"를 이용합니까?빌트인, 리액터, 아카? (0) | 2023.08.12 |
| 별도의 스레드에서 실행되는 iphoneios (0) | 2023.08.12 |
| 판다/파이썬에서 엑셀 스프레드시트의 공식을 보려면 어떻게 해야 합니까? (0) | 2023.08.12 |
| 고정 테이블 셀 폭 (0) | 2023.08.12 |