Führen Browser geladene Skripte in einem einzigen Thread aus?

Ich kann folgendes schreiben:Führen Browser geladene Skripte in einem einzigen Thread aus?

<script src="file1.js" defer></script> 
<script src="file2.js" defer></script> 
<script src="file3.js" defer></script>

Was bedeutet, Dateien parallel heruntergeladen werden können, sondern nur nacheinander ausgeführt. Ich kann jedoch async Attribut hinzufügen, um Browser Code in zufälliger Reihenfolge ausführen zu lassen.

<script src="file1.js" async></script> 
<script src="file2.js" async></script> 
<script src="file3.js" async></script>

Wenn ich an der Leistungssteigerung interessiert bin, kann der zweite Block schneller ausgeführt werden? Wie ich es sehe, wenn ein Browser alle JavaScript in einem Thread ausführt, unterscheidet sich die Gesamtausführungszeit für 3 Skripts nicht von dem ersten Block, nur die Reihenfolge der Ausführung kann unterschiedlich sein. Habe ich recht?

Quelle

2016-04-12 AngularInDepth.com

Muss noch etwas getestet werden? –

Ich denke, dass die Zeit für die gesamte Ausführung in beiden Methoden gleich sein wird, aber im 'asynchronen' können wir die wichtigen Daten wie HTML schneller zeigen. Das ist absolut meine Meinung. –

Wenn ich an der Leistungssteigerung interessiert bin, kann der zweite Block schneller ausgeführt werden?

Da die Skripte heruntergeladen und asynchron ausgeführt werden, wird die Ladezeit der Seite reduziert.

Der Autor der Script-injected "async scripts" considered harmful vergleicht drei Methoden zum Einbinden eines Skripts: ein injiziertes Skript, ein blockierendes Skript und ein Skript mit dem Attribut async. Das Ergebnis ist:

    script execution onload 
----------------- ------------------ -------- 
    script-injected ~3.7s    ~3.7s 
    blocking script ~2.7s    ~2.7s 
    async attribute ~1.7s    ~2.7s

Wie Sie sehen, das async Attribut bietet die beste Leistung. Wenn die Ausführungsreihenfolge der Skripts keine Rolle spielt, sollten Sie sie unbedingt verwenden.

Wie für Ihre Titelfrage:

Do-Browser ausführen Skripte in einem einzigen Thread geladen?

Ja, weil JavaScript single-threaded ist, aber in Bezug auf die Leistung spielt es keine Rolle. Das Herunterladen eines Skripts dauert viel länger als das tatsächliche Ausführen. Daher sollten Sie sich auf die Optimierung des Download-Teils konzentrieren.

Ich habe einen Test gemacht. Ich habe ein einfaches Skript:

for (var i = 0; i < 1e8; i++);

ich das gleiche Skript in zwei Dateien setzen, test1.js und test2.js.Dann machte ich zwei HTML-Dateien, die erste ohne async und die zweite mit:

test1.html:

<!DOCTYPE html> 
<script src="test1.js"></script> 
<script src="test2.js"></script>

test2.html:

<!DOCTYPE html> 
<script src="test1.js" async></script> 
<script src="test2.js" async></script>

Dann öffnete ich diese HTML-Dateien in meinem Browser und überprüft Timeline Registerkarte in Chrome DevTools:

test1.html:

test2.html:

Wie Sie Skripte in beiden Fällen sehen, werden asynchron nicht ausgeführt.

Siehe auch: Is JavaScript guaranteed to be single-threaded?.

Quelle

2016-04-12 07:21:42

danke, aber die Fragen sind speziell über die Ausführungszeit. Von dem, was ich sehen kann, ist die Ausführungszeit nicht davon betroffen, ob ich 'defer' oder' async' verwende oder nicht. Die Ladezeit ist in der Tat besser mit 'async' –

_without async würde der Browser auf die Ausführung des ersten Skripts warten, und danach würde das zweite Skript ausgeführt werden. _ - Was wird es tun _with_' async' wenn es nur einen Thread hat Skripte ausführen? :) Das ist der Hauptpunkt meiner Frage. –

danke, also im Grunde beweist dies, dass die gesamte Ausführungszeit ändert sich nicht mit der Einführung von Async-Attribut und ist gleich der Summe der Ausführungszeit jedes Skripts, richtig? –

Führen Browser geladene Skripte in einem einzigen Thread aus?

Antwort

Verwandte Themen