L'exécution de balises de script bloque-t-elle le téléchargement d'autres balises de script ?

Question

Cela vient du index.html dans Modèle HTML5, juste avant le </body> étiqueter:

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

Je sais que les balises de script peuvent bloquer les téléchargements parallèles, c'est pourquoi il est recommandé de les mettre en bas.

Ma question: Le navigateur attend-il vraiment que jQuery soit entièrement téléchargé et exécuté avant même de commencer à télécharger le plugins.js et puis le script.js?

Ou est-ce qu'il anticipe et démarre tous les scripts Téléchargement le plus rapidement possible (en parallèle), et simplement retarder le exécution de chaque script jusqu'à ce que le précédent ait fini de s'exécuter ?

Answer 1

Ma question:Le navigateur attend-il vraiment que jQuery soit entièrement téléchargé et exécuté avant même de commencer à télécharger le plugins.js et puis le script.js?

Cela peut ou non, mais probablement pas ;les navigateurs essaient (dans certaines limites) de paralléliser les téléchargements pour accélérer le chargement des pages.

Ou est-ce qu'il anticipe et démarre le téléchargement de tous les scripts le plus rapidement possible (en parallèle), et retarde simplement le exécution de chaque script jusqu'à ce que le précédent ait fini de s'exécuter ?

C'est vrai, parce que cette partie est requis par le cahier des charges (en l'absence du async ou defer les attributs).Et comme le montre votre exemple, il ne peut même pas nécessairement déterminer l'ordre dans lequel les scripts doivent s'exécuter jusqu'à ce que le script soit exécuté, car le script peut insérer un autre script.Mais il peut les télécharger et les préparer.

Answer 2

J'ai trouvé cette réponse plus appropriée à cette question, copiée ci-dessous le contenu de http://www.html5rocks.com/en/tutorials/speed/script-loading/ consultez-le pour plus de détails.

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

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

Ahh, une simplicité bienheureuse.Ici, le navigateur téléchargera les deux scripts en parallèle et les exécutera dès que possible, en maintenant leur ordre.« 2.js » ne s'exécutera pas tant que « 1.js » n'a pas été exécuté (ou n'a pas réussi à le faire), « 1.js » ne s'exécutera pas tant que le script ou la feuille de style précédente n'a pas été exécuté, etc.

Malheureusement, le navigateur bloque le rendu ultérieur de la page pendant que tout cela se produit.Cela est dû aux API DOM du « premier âge du Web » qui permettent d'ajouter des chaînes au contenu que l'analyseur analyse, comme document.write.Les navigateurs les plus récents continueront à analyser ou à analyser le document en arrière-plan et à déclencher les téléchargements du contenu externe dont il pourrait avoir besoin (js, images, css, etc.), mais le rendu est toujours bloqué.

C’est pourquoi les grands du monde de la performance recommandent de placer des éléments de script à la fin de votre document, car cela bloque le moins de contenu possible.Malheureusement, cela signifie que votre script n'est pas vu par le navigateur tant qu'il n'a pas téléchargé tout votre code HTML, et à ce stade, il a commencé à télécharger d'autres contenus, tels que du CSS, des images et des iframes.Les navigateurs modernes sont suffisamment intelligents pour donner la priorité à JavaScript par rapport aux images, mais nous pouvons faire mieux.

Answer 3

La spécification HTML5 dit :

Si aucun des attributs [c.-à-d.Async et Defer] est présent, puis le script est récupéré et exécuté immédiatement, avant que l'agent utilisateur ne continue d'analyser la page.

Si la page n'est pas analysée, alors l'agent utilisateur ne peut pas savoir quelles ressources ultérieures doivent être récupérées, donc un navigateur strictement conforme ne devrait pas être en mesure de récupérer d'autres ressources tant que la première n'a pas été réellement exécutée.

Pour comprendre pourquoi cela a du sens, imaginez que le premier script contienne

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

sans fermeture de commentaire correspondante, alors tout ce qui suit le script dans le balisage fera partie d'un commentaire jusqu'au prochain --> est rencontré.Cela peut entraîner l’omission d’une ou plusieurs références de ressources.