Blockiert das Ausführen von Skript-Tags das Herunterladen anderer Skript-Tags?

Question

Das ist von der index.html In HTML5-Boilerplate, kurz vor dem </body> Etikett:

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

Ich weiß, dass Skript-Tags parallele Downloads blockieren können, weshalb Es wird empfohlen, sie unten zu platzieren.

Meine Frage: Wartet der Browser wirklich darauf, dass jQuery vollständig heruntergeladen und ausgeführt wird, bevor er überhaupt mit dem Herunterladen beginnt? plugins.js und dann die script.js?

Oder schaut es nach vorne und startet alle Skripte wird heruntergeladen so schnell wie möglich (parallel) und verzögern Sie das einfach Ausführung jedes Skripts, bis die Ausführung des vorherigen abgeschlossen ist?

Answer 1

Meine Frage:Wartet der Browser wirklich darauf, dass jQuery vollständig heruntergeladen und ausgeführt wird, bevor er überhaupt mit dem Herunterladen beginnt? plugins.js und dann die script.js?

Es kann sein oder auch nicht, aber wahrscheinlich nicht;Browser versuchen (innerhalb bestimmter Grenzen), Downloads zu parallelisieren, um das Laden von Seiten zu beschleunigen.

Oder schaut es nach vorne und startet den Download aller Skripte so schnell wie möglich (parallel) und verzögert den Download einfach Ausführung jedes Skripts, bis die Ausführung des vorherigen abgeschlossen ist?

Richtig, denn dieser Teil ist gemäß der Spezifikation erforderlich (in Abwesenheit der async oder defer Attribute).Und wie Ihr Beispiel zeigt, kann es nicht einmal unbedingt die Reihenfolge bestimmen, in der Skripte ausgeführt werden sollen, bis das Skript ausgeführt wurde, da das Skript möglicherweise ein anderes Skript einfügt.Aber es kann sie herunterladen und bereithalten.

Answer 2

Ich fand diese Details eine passendere Antwort auf diese Frage, deren Inhalt unten kopiert wurde http://www.html5rocks.com/en/tutorials/speed/script-loading/ Weitere Informationen finden Sie hier.

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

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

Ahh, glückselige Einfachheit.Hier lädt der Browser beide Skripte parallel herunter und führt sie so schnell wie möglich aus, wobei ihre Reihenfolge beibehalten wird.„2.js“ wird nicht ausgeführt, bis „1.js“ ausgeführt wurde (oder dies nicht getan hat), „1.js“ wird nicht ausgeführt, bis das vorherige Skript oder Stylesheet ausgeführt wurde usw. usw.

Leider blockiert der Browser währenddessen die weitere Darstellung der Seite.Dies ist auf DOM-APIs aus dem „ersten Zeitalter des Webs“ zurückzuführen, die das Anhängen von Zeichenfolgen an den Inhalt ermöglichen, den der Parser durchsucht, wie z. B. document.write.Neuere Browser scannen oder analysieren das Dokument weiterhin im Hintergrund und lösen Downloads für möglicherweise benötigte externe Inhalte (JS, Bilder, CSS usw.) aus, das Rendern ist jedoch weiterhin blockiert.

Aus diesem Grund empfehlen die Großen und Guten der Performance-Welt, Skriptelemente am Ende Ihres Dokuments zu platzieren, da dadurch so wenig Inhalt wie möglich blockiert wird.Leider bedeutet dies, dass Ihr Skript vom Browser erst erkannt wird, wenn Ihr gesamter HTML-Code heruntergeladen wurde, und zu diesem Zeitpunkt bereits mit dem Herunterladen anderer Inhalte wie CSS, Bilder und Iframes begonnen hat.Moderne Browser sind intelligent genug, um JavaScript Vorrang vor Bildern einzuräumen, aber wir können es noch besser machen.

Answer 3

Die HTML5-Spezifikation sagt:

Wenn keines der Attribute [d. h.Async und Defer] ist vorhanden, dann wird das Skript sofort abgerufen und ausgeführt, bevor der Benutzeragent die Seite fortsetzt.

Wenn die Seite nicht geparst wird, kann der Benutzeragent nicht wissen, welche nachfolgenden Ressourcen abgerufen werden müssen. Daher sollte ein strikt konformer Browser nicht in der Lage sein, weitere Ressourcen abzurufen, bis die erste tatsächlich ausgeführt wurde.

Um zu verstehen, warum dies sinnvoll ist, stellen Sie sich vor, dass das erste Skript enthält

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

Ohne passenden Kommentarabschluss wird alles, was im Markup auf das Skript folgt, bis zum nächsten Teil eines Kommentars --> angetroffen wird.Dies kann dazu führen, dass eine oder mehrere Ressourcenreferenzen übersprungen werden.