¿La ejecución de etiquetas de script bloquea la descarga de otras etiquetas de script?

Question

Esto es de la índice.html en Texto repetitivo HTML5, justo antes del </body> etiqueta:

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

Sé que las etiquetas de script pueden bloquear descargas paralelas, por eso se recomienda ponerlos en la parte inferior.

Mi pregunta: ¿El navegador realmente espera a que jQuery se descargue y ejecute por completo antes de comenzar a descargar el archivo? plugins.js y luego el script.js?

¿O mira hacia adelante e inicia todos los guiones? descargando lo más rápido posible (en paralelo), y simplemente retrasar el ejecución de cada script hasta que el anterior haya terminado de ejecutarse?

Answer 1

Mi pregunta:¿El navegador realmente espera a que jQuery se descargue y ejecute por completo antes de comenzar a descargar el archivo? plugins.js y luego el script.js?

Puede que lo sea o no, pero probablemente no;Los navegadores intentan (dentro de límites) paralelizar las descargas para acelerar la carga de la página.

¿O mira hacia adelante e inicia la descarga de todos los scripts lo más rápido posible (en paralelo) y simplemente retrasa la descarga? ejecución de cada script hasta que el anterior haya terminado de ejecutarse?

Correcto, porque esa parte es requerido por la especificación (en ausencia del async o defer atributos).Y como muestra su ejemplo, ni siquiera puede determinar necesariamente el orden en el que se deben ejecutar los scripts hasta que se haya ejecutado, porque el script puede insertar otro script.Pero puede descargarlos y tenerlos listos.

Answer 2

Encontré que estos detalles son una respuesta más apropiada a esta pregunta, copié el contenido a continuación de http://www.html5rocks.com/en/tutorials/speed/script-loading/ consúltelo para obtener más detalles.

<script src="//otro-dominio.com/1.js"></script>

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

Ahh, maravillosa sencillez.Aquí el navegador descargará ambos scripts en paralelo y los ejecutará lo antes posible, manteniendo su orden."2.js" no se ejecutará hasta que "1.js" se haya ejecutado (o no lo haya hecho), "1.js" no se ejecutará hasta que se haya ejecutado el script o la hoja de estilo anterior, etc., etc.

Desafortunadamente, el navegador bloquea la representación adicional de la página mientras sucede todo esto.Esto se debe a las API DOM de “la primera era de la web” que permiten agregar cadenas al contenido que el analizador está procesando, como document.write.Los navegadores más nuevos continuarán escaneando o analizando el documento en segundo plano y activarán descargas de contenido externo que pueda necesitar (js, imágenes, css, etc.), pero la renderización aún está bloqueada.

Es por esto que los grandes y buenos del mundo del performance recomiendan poner elementos de script al final de tu documento, ya que bloquea la menor cantidad de contenido posible.Desafortunadamente, esto significa que el navegador no ve su secuencia de comandos hasta que descarga todo su HTML y, en ese momento, comienza a descargar otro contenido, como CSS, imágenes e iframes.Los navegadores modernos son lo suficientemente inteligentes como para dar prioridad a JavaScript sobre las imágenes, pero podemos hacerlo mejor.

Answer 3

La especificación HTML5 dice:

Si ninguno de los atributos [es decirAsync and Difer] está presente, luego el script se obtiene y se ejecuta inmediatamente, antes de que el agente de usuarios continúe analizando la página.

Si la página no se analiza, entonces el agente de usuario no puede saber qué recursos posteriores deben recuperarse, por lo que un navegador estrictamente conforme no debería poder recuperar más recursos hasta que el primero se haya ejecutado realmente.

Para ver por qué esto tiene sentido, imagine que el primer guión contiene

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

sin un cierre de comentario coincidente, todo lo que siga el script en el marcado pasará a formar parte de un comentario hasta el siguiente --> se encuentra.Esto puede provocar que se omitan una o más referencias a recursos.