스크립트 태그를 실행하면 다른 스크립트 태그가 다운로드되지 않도록 차단되나요?
-
12-12-2019 - |
문제
이것은 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("<!--");
일치하는 주석 폐쇄가없는 경우 마크 업에서 스크립트를 따르는 모든 것이 다음
-->
가 발생할 때까지 주석의 일부가됩니다.이로 인해 하나 이상의 리소스 참조가 건너 뛸 수 있습니다.