Ausführliche Erläuterung von Beispielen für synchrones Laden und asynchrones Laden in JavaScript

Synchrones Laden

Die am häufigsten verwendete Form des synchronen Ladens ist:

<script src="http://yourdomain.com/script.js"></script>

Der synchrone Modus, auch Blockierungsmodus genannt, verhindert, dass der Browser nachverfolgt. Die Verarbeitung stoppt das nachfolgende Parsen und damit das anschließende Laden von Dateien (z. B. Bilder), das Rendern und die Codeausführung. Der Grund, warum js synchron ausgeführt werden muss, liegt darin, dass es in js möglicherweise Verhaltensweisen wie das Ausgeben von Dokumentinhalten, das Ändern von Dom, Umleitungen usw. gibt, sodass die synchrone Ausführung standardmäßig sicher ist. In der Vergangenheit wurde allgemein empfohlen, 3f1c4e4b6b16bbbd69b2ee476dc4f83a am Ende der Seite vor 36cc49f0c466276486e50c850b7e4956 zu platzieren, um dieses Blockierungsverhalten zu minimieren und die Seite zuerst anzuzeigen. Vereinfacht ausgedrückt: Die geladene Netzwerkzeitleiste ist ein Wasserfallmodell, während die asynchron geladene Zeitleiste ein Parallelitätsmodell ist.

Allgemeines asynchrones Laden

(function() { 
var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
s.src = 'http://yourdomain.com/script.js'; 
var x = document.getElementsByTagName('script')[0]; 
x.parentNode.insertBefore(s, x); 
})();

Asynchrones Laden wird auch als nicht blockierend bezeichnet. Der Browser verarbeitet nachfolgende Seiten weiterhin, während js heruntergeladen und ausgeführt wird. Bei dieser Methode wird mit js ein Skriptelement innerhalb des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags auf der Seite erstellt und in das Dokument eingefügt. Dadurch wird ein nicht blockierendes Herunterladen von JS-Code erreicht. Das async-Attribut ist eine neue asynchrone Unterstützung in HTML5. Siehe die Erklärung unten. Es ist sinnvoll, es hinzuzufügen (es hat keine Auswirkungen, wenn Sie es nicht hinzufügen). Diese Methode wird als Script-DOM-Element-Methode bezeichnet und erfordert nicht denselben Ursprung von js. Die Methode, JS-Code in eine anonyme Funktion zu packen und sofort auszuführen, besteht darin, den Variablennamen vor dem Durchsickern nach außen zu schützen. Dies ist eine sehr häufige Methode, die insbesondere in JS-Bibliotheken häufig verwendet wird.
Zum Beispiel verwenden Google Analytics und Google+ Badge beide diesen asynchronen Ladecode:

(function() { 
var ga = document.createElement('script'); 
ga.type = 'text/javascript'; ga.async = true; 
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
})(); 
(function() 
{var po = document.createElement("script"); 
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; 
var s = document.getElementsByTagName("script")[0]; 
s.parentNode.insertBefore(po, s); 
})();

Diese Lademethode verhindert jedoch, dass das Onload-Ereignis ausgelöst wird, bevor der Ladevorgang abgeschlossen ist, und jetzt viele Seiten Der Code muss beim Onload zusätzliche Renderarbeit leisten, sodass er dennoch die Initialisierungsverarbeitung einiger Seiten blockiert.

Asynchrones Laden beim Onload

(function() { 
function async_load(){ 
var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
s.src = 'http://yourdomain.com/script.js'; 
var x = document.getElementsByTagName('script')[0]; 
x.parentNode.insertBefore(s, x); 
} 
if (window.attachEvent) 
window.attachEvent('onload', async_load); 
else 
window.addEventListener('load', async_load, false); 
})();

Dies ähnelt der vorherigen Methode, der Schlüssel besteht jedoch darin, dass das asynchrone Laden von js nicht sofort gestartet wird, sondern nur das asynchrone Laden beim Onload. Dies löst das Problem, das Auslösen des Onload-Ereignisses zu verhindern.
Ergänzung: DOMContentLoaded- und OnLoad-Ereignisse
DOMContentLoaded: Die Seite (Dokument) wurde analysiert und die DOM-Elemente in der Seite sind verfügbar. Möglicherweise wurden die auf der Seite referenzierten Bilder und Subframes jedoch noch nicht geladen.
OnLoad: Alle Ressourcen auf der Seite wurden geladen (einschließlich Bilder). Der Ladevorgang des Browsers stoppt an dieser Stelle.
Diese beiden Zeitpunkte unterteilen die Zeitleiste für das Laden der Seite in drei Phasen.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für synchrones Laden und asynchrones Laden in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!