A execução de tags de script impede o download de outras tags de script?

Question

Isto é do index.html em Padrão HTML5, pouco antes do </body> marcação:

<!-- 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>

Eu sei que tags de script podem bloquear downloads paralelos, e é por isso é recomendado colocá-los na parte inferior.

Minha pergunta: O navegador realmente espera que o jQuery seja totalmente baixado e executado antes mesmo de começar a baixar o plugins.js e então o script.js?

Ou olha para frente e inicia todos os scripts baixando o mais rápido possível (em paralelo) e apenas atrasar o execução de cada script até que o anterior termine de ser executado?

Answer 1

Minha pergunta:O navegador realmente espera que o jQuery seja totalmente baixado e executado antes mesmo de começar a baixar o plugins.js e então o script.js?

Pode ou não, mas provavelmente não;os navegadores tentam (dentro dos limites) paralelizar os downloads para acelerar o carregamento das páginas.

Ou ele olha para frente e inicia o download de todos os scripts o mais rápido possível (em paralelo) e apenas atrasa o execução de cada script até que o anterior termine de ser executado?

Certo, porque essa parte é exigido pela especificação (na ausência do async ou defer atributos).E como mostra seu exemplo, ele não pode necessariamente determinar a ordem em que os scripts devem ser executados até que o script seja executado, porque o script pode inserir outro script.Mas pode baixá-los e prepará-los.

Answer 2

Achei esta resposta mais apropriada para esta pergunta, copiada abaixo do conteúdo de http://www.html5rocks.com/en/tutorials/speed/script-loading/ consulte-o para obter mais detalhes.

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

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

Ahh, simplicidade feliz.Aqui o navegador irá baixar os dois scripts em paralelo e executá-los o mais rápido possível, mantendo sua ordem.“2.js” não será executado até que “1.js” seja executado (ou não tenha sido executado), “1.js” não será executado até que o script ou folha de estilo anterior seja executado, etc.

Infelizmente, o navegador bloqueia a renderização adicional da página enquanto tudo isso acontece.Isso se deve às APIs DOM da “primeira era da web”, que permitem que strings sejam anexadas ao conteúdo que o analisador está analisando, como document.write.Os navegadores mais recentes continuarão a digitalizar ou analisar o documento em segundo plano e acionar downloads de conteúdo externo necessário (js, imagens, css, etc.), mas a renderização ainda está bloqueada.

É por isso que os grandes e os bons do mundo do desempenho recomendam colocar elementos de script no final do seu documento, pois bloqueiam o mínimo de conteúdo possível.Infelizmente, isso significa que seu script não é visto pelo navegador até que ele baixe todo o seu HTML e, nesse ponto, ele comece a baixar outros conteúdos, como CSS, imagens e iframes.Os navegadores modernos são inteligentes o suficiente para dar prioridade ao JavaScript em detrimento das imagens, mas podemos fazer melhor.

Answer 3

A especificação HTML5 diz:

Se nenhum dos atributos [ou seja,assíncrono e adiamento] estão presentes, o script é buscado e executado imediatamente, antes que o agente do usuário continue analisando a página.

Se a página não for analisada, o agente do usuário não poderá saber quais recursos subsequentes precisam ser buscados, portanto, um navegador estritamente conforme não deverá ser capaz de buscar mais recursos até que o primeiro tenha sido realmente executado.

Para ver por que isso faz sentido, imagine que o primeiro script contém

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

sem fechamento de comentário correspondente, tudo o que segue o script na marcação se tornará parte de um comentário até o próximo --> é encontrado.Isto pode fazer com que uma ou mais referências de recursos sejam ignoradas.