스크립트 태그를 실행하면 다른 스크립트 태그가 다운로드되지 않도록 차단되나요?

StackOverflow https://stackoverflow.com//questions/10681388

문제

이것은 index.html ~에 HTML5 상용구, 직전에 </body> 꼬리표:

<!-- JavaScript at the bottom for fast page loading: http://developer.yahoo.com/performance/rules.html#js_bottom -->

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>

<!-- scripts concatenated and minified via build script -->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- end scripts -->

<!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
     mathiasbynens.be/notes/async-analytics-snippet -->
<script>
  var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  s.parentNode.insertBefore(g,s)}(document,'script'));
</script>

스크립트 태그가 병렬 다운로드를 차단할 수 있다는 것을 알고 있습니다. 맨 아래에 두는 것이 좋습니다.

내 질문: 브라우저는 jQuery가 완전히 다운로드되고 실행될 때까지 실제로 다운로드를 시작하기 전에 기다립니까? plugins.js 그리고 나서 script.js?

아니면 미리 보고 모든 스크립트를 시작합니까? 다운로드 중 가능한 한 빨리 (병렬로), 그리고 단지 지연 실행 이전 스크립트의 실행이 완료될 때까지 각 스크립트를 처리합니까?

도움이 되었습니까?

해결책

내 질문 : 브라우저가 plugins.js를 다운로드하고 script.js를 다운로드하기 전에 jQuery를 완전히 다운로드하고 실행할 때까지 기다리고 있습니까?

그것은 그렇지 않을 수도 있고, 아마도 그렇지 않을 수도 있습니다. 브라우저가 페이지로드를 빨리 만들기 위해 다운로드를 병렬화하려면 브라우저를 시도합니다.

또는 가능한 한 신속하게 다운로드하는 모든 스크립트를 모든 스크립트를 시작하고 이전에 실행이 끝날 때까지 각 스크립트의 실행 을 지연시키는 것입니까?

right, 그 부분은 "noreferrer">에 의해 필요합니다. 사양 (async 또는 defer 속성을 두드림 해제). 그리고 예제가 표시되면 스크립트가 다른 스크립트를 삽입 할 수 있으므로 스크립트가 실행될 때까지 스크립트가 실행될 순서를 확인할 수 없습니다. 그러나 그것은 그것을 다운로드하여 준비 할 수 있습니다.

다른 팁

이 질문에 대한 자세한 답변이 더 적절하다는 것을 알았습니다. http://www.html5rocks.com/en/tutorials/speed/script-loading/ 자세한 내용은 참조하세요.

<script src="//other-domain.com/1.js"></script>

<script src="2.js"></script>

아, 행복한 단순함.여기서 브라우저는 두 스크립트를 병렬로 다운로드하고 순서를 유지하면서 가능한 한 빨리 실행합니다."2.js"는 "1.js"가 실행될 때까지(또는 실패할 때까지) 실행되지 않으며, "1.js"는 이전 스크립트나 스타일시트가 실행될 때까지 실행되지 않습니다.

불행하게도 브라우저는 이 모든 일이 일어나는 동안 페이지의 추가 렌더링을 차단합니다.이는 document.write와 같이 파서가 씹는 콘텐츠에 문자열을 추가할 수 있는 "웹 최초 시대"의 DOM API 때문입니다.최신 브라우저는 백그라운드에서 문서를 계속 스캔하거나 구문 분석하고 필요할 수 있는 외부 콘텐츠(js, 이미지, CSS 등)에 대한 다운로드를 트리거하지만 렌더링은 여전히 ​​차단됩니다.

이것이 바로 성능 세계의 위대하고 좋은 점들이 가능한 한 적은 내용을 차단하기 때문에 문서 끝에 스크립트 요소를 배치할 것을 권장하는 이유입니다.불행하게도 이는 모든 HTML을 다운로드할 때까지 브라우저에서 스크립트를 볼 수 없으며 그 시점에서 CSS, 이미지 및 iframe과 같은 다른 콘텐츠를 다운로드하기 시작한다는 것을 의미합니다.최신 브라우저는 이미지보다 JavaScript에 우선순위를 둘 만큼 똑똑하지만 더 잘할 수도 있습니다.

HTML5 사양은 다음과 같습니다.

어느 쪽이 아닌 경우 [즉.비동기와 지연]이 있으므로 스크립트가 가져오고 사용자 에이전트가 계속해서 지속되기 전에 즉시 실행됩니다. 페이지.

페이지가 구문 분석되지 않은 경우 사용자 에이전트는 어떤 후속 자원을 가져와야 하는지를 알 수 없으므로 먼저 준수하는 브라우저가 처음 실행이 실제로 실행될 때까지 추가 리소스를 가져올 수 없어야합니다.

이것이 의미가있는 이유를 확인하려면 첫 번째 스크립트가 가 포함되어 있음을 상상해보십시오. 

document.write("<!--");
.

일치하는 주석 폐쇄가없는 경우 마크 업에서 스크립트를 따르는 모든 것이 다음 -->가 발생할 때까지 주석의 일부가됩니다.이로 인해 하나 이상의 리소스 참조가 건너 뛸 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top