모든 JavaScript 코드를 HeadJS로 헤드에 삽입해야합니까?

Question

HeadJS을 사용하여 모든 JavaScript 코드를 내 웹 사이트의 헤드에로드합니다. HeadJS로 모든 자바 스크립트를 머리에로드하면 다음 작업을 수행해야합니까?

<script src="/-/js/head.js"></script> 

<script> 
    head.js("https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js") 
     .js("/-/js/slideshow.js") 
     .js("/-/js/modernizr.js") 
     .js("/-/js/cookie.js") 
     .js("/-/js/thumbs.js") 
     .js("/-/js/infinitescroll.js") 
     .js("/-/js/manual-trigger.js") 
     .js("/-/js/easing.js") 
     .js("/-/js/thumbs.js") 
     .js("/-/js/popup.js") 
     .js("/-/js/sharre.js") 
     .js("/-/js/selectivizr.js") 
     .js("/-/js/scripts.js"); 
</script> 

또한 파일 'scripts.js는'머리에 다른 자바 스크립트 스크립트를 사용하는 모든 내 자신의 jQuery 스크립트입니다. 최적화를 위해이를 실행하는 가장 좋은 방법입니까?

나는이 파일에 모든 코드를 래핑하는 데 사용 : 당신은 항상 put your scripts at the bottom just before the closing body tag에 시도해야

head.ready(function() { my code }); 

Answer 1

.

Answer 2

올바른 방법은 하나의 저작물이 다른 저작물 (예 : 콘텐츠 렌더링을 차단하는 스크립트)의 다운로드를 차단하지 않도록 리소스를 병렬로 다운로드하는 것입니다. 이상적으로 CSS를 먼저 다운로드 한 다음 중요도/종속성의 순서로 스크립트를 병렬로 다운로드해야합니다. 예를 들어, jQuery 관련 스크립트 전에 jQuery 코드를 다운로드하고 "장식용"스크립트 전에 기능을 다운로드해야 할 것이다.

다시 말하지만, 다른 애셋 (CSS 및 콘텐츠)을 차단하지 않는 한 다운로드를 시작할 때 중요하지 않습니다.

빠른 시연을 통해 OP에서 귀하의 접근 방식이 올바른 것처럼 보입니다. 내가 읽은 것으로부터, headjs는 병렬로 다운로드 할 수 있지만 순서대로 실행합니다 (순서를 지정할 수 있습니다). 당신이 사용한 접근법은 먼저 도착하는 스크립트를 실행합니다. 당신은 매우 모험적입니다!^_^

불행하게도 나는 스크립트의 각의 기능적 중요성을 모르겠지만, 재정렬, 같은 제안 : 병렬 스크립트를 다운로드합니다

<script> 
head.js("https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js", 
    "/-/js/modernizr.js", 
    "/-/js/selectivizr.js", 
    "/-/js/cookie.js", 
    etc... 
    ); 
</script> 

이를하지만,이 순서대로 실행됩니다. 당신은 ,와 함께 각 스크립트를 분리하여 "병렬로 다운로드, 순서대로 실행"접근법을 사용해야합니다.

내 생각 : 아직도 조사 - 또한 사용 조건 다운로드를 포함 할 수있는 옵션이 : 나는 인터넷  에 대한 탐색기를 조건 부하를보고

head.browser.ie(insert scripts); 

Check out the awesomeness.

을 (신경 끄시 고 아무것도 다른) , 나는 개발자에게 나의 첫번째 태어난 아이를주는 것을 고려했다.