Detaillierte Erläuterung des asynchronen Ladens von JavaScript
php中世界最好的语言Original
2018-03-17 15:35:302105Durchsuche
Dieses Mal erkläre ich Ihnen ausführlich das asynchrone Laden von JavaScript und welche Vorsichtsmaßnahmen beim Umgang mit dem asynchronen Laden von JavaScript gelten. Das Folgende ist ein praktischer Fall Schauen Sie mal rein.
Das Problem des synchronen Ladens
Das Standard-JS wird hier als Parsen und Ausführen und nicht als „Herunterladen“ verstanden , lädt der Browser die vom Code angeforderten Ressourcen im Wasserfallstil, anstatt sie zu blockieren, aber die Ausführung von js wird immer blockiert. Welche Probleme verursacht dies? Wenn meine Indexseite einige JS laden muss, eine der Anforderungen jedoch längere Zeit keine Antwort erhält, blockiert dies die Ausführung des nachfolgenden JS-Codes (synchrones Laden) und das Rendern der Seite kann nicht fortgesetzt werden (wenn die JS-Einführung erfolgt). steht im Kopf nach dem Label).
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
this is a test
Zum Beispiel wird der obige Code als index.html-Datei gespeichert. Der Hauptteil der Seite ist eine einfache Zeichenfolge, aber nachdem der Code ausgeführt wurde, wird die Seite bleibt leer. Warum? Da die angeforderten js längere Zeit nicht geladen werden können (möglicherweise aufgrund der Blockierung von Google usw.), wird die Ausführung des nachfolgenden Codes blockiert und die Seite kann nicht gerendert werden. Vielleicht schlagen Sie vor, dass die Seite zuerst gerendert wird, wenn Sie den js-Code vor
einfügen! Gute Methode, wir versuchen, js dahinter zu setzen:
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
Die Seite wird sofort gerendert, „das ist ein Test“ erscheint auch schnell im Vordergrund, die Welt scheint ruhig zu sein, aber:
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
Ich habe einfach einen Code hinzugefügt, der auf dem vorherigen Code basiert, aber „Hallo Welt“ konnte lange Zeit nicht auf der Konsole ausgegeben werden. Offensichtlich hat die vorherige js-Anfrage das Laden des folgenden Codes blockiert. Uns wurde plötzlich klar, dass das Ändern der Ladeposition von js nur erforderlich ist. Es kann das Rendering der Seite ändern, hat jedoch keinen Nutzen für das Laden von js und js wird weiterhin blockiert.
Js asynchrones Laden implementieren
Unsere Anforderung scheint sehr einfach zu sein. Es kann eine Zeichenfolge in der Konsole ausgeben, während die Seite geladen wird. Um es einfacher auszudrücken: Führen Sie während der Segmentierung der von Google bereitgestellten js weiterhin die folgenden js aus, um ein asynchrones Laden von js zu erreichen.
Der häufigste Ansatz besteht darin, Skript-Tags dynamisch zu generieren:
<body>
this is a test
<script type="text/javascript">
~function() {
var s = document.createElement('script');
s.src = 'http://china-addthis.googlecode.com/svn/trunk/addthis.js';
document.body.appendChild(s);
}();
</script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
console.log('hello world');
</script>
</body>
Aber es gibt immer noch ein Problem, das verhindert, dass das Onload-Ereignis ausgelöst wird, bevor der Ladevorgang abgeschlossen ist. und viele Seiten jetzt Der Code führt beim Laden auch zusätzliche Renderarbeit aus, sodass er immer noch die Initialisierungsverarbeitung einiger Seiten blockiert:
<body>
this is a test
<script type="text/javascript">
~function() {
// function async_load() {
var s = document.createElement('script');
s.src = 'http://china-addthis.googlecode.com/svn/trunk/addthis.js';
document.body.appendChild(s);
// }
// window.addEventListener('load', async_load, false);
}();
window.onload = function() {
var txt = document.createTextNode(' hello world');
document.body.appendChild(txt);
};
</script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
</body>
Zum Beispiel kann der obige Code „Hallo Welt“ nicht gut rendern. Wir entfernen einfach die Kommentare und lassen die von Google bereitgestellten js während des Onloads asynchron laden. Dies löst das Problem der Blockierung der Auslösung von Onload-Ereignissen.
DOMContentLoaded- und OnLoad-Ereignisse hinzugefügt. DOMContentLoaded: Die Seite (Dokument) wurde analysiert und die Dom-Elemente auf der Seite sind verfügbar. Möglicherweise wurden die auf der Seite referenzierten Bilder und Subframes jedoch noch nicht geladen. OnLoad: Alle Ressourcen der Seite werden 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 scheint eine bessere Lösung für dieses Problem zu sein, aber HTML5 bietet eine einfachere Methode, das Async-Attribut!
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js' async='async'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
console.log('hello world');
</script>
async ist ein neues Attribut von HTML5. Das async-Attribut gibt an, dass das Skript asynchron ausgeführt wird, sobald es verfügbar ist (es wird sofort ausgeführt, sobald es heruntergeladen wurde).
Es ist zu beachten, dass das async-Attribut nur für externe Skripte gilt (nur bei Verwendung des src-Attributs)
Das defer-Attribut wird oft zusammen mit async erwähnt:
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js' defer='defer'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
console.log('hello world');
</script>
scheint umgesetzt zu sein. Der Effekt ist ähnlich, aber ist er wirklich derselbe? Werfen wir einen Blick auf die Definition des Defer-Attributs.
In der Vergangenheit unterstützte Defer nur IE-Hacks, aber jetzt, mit dem Aufkommen von HTML5, wird Defer vollständig unterstützt. Das Defer-Attribut gibt an, dass das Skript erst ausgeführt wird, wenn die Seite vollständig geladen ist. Das defer-Attribut gilt nur für externe Skripte (nur bei Verwendung des src-Attributs). ps: Die vom IE unterstützte Verzögerung scheint nicht der Fall zu sein, da ich kein Interesse am IE habe und mich nicht damit befassen werde. Wenn Sie interessiert sind, können Sie die relevanten Informationen überprüfen.
Da Async und Defer oft zusammen auftreten, analysieren wir sie!
Wenn keine asynchronen und verzögerten Attribute vorhanden sind (zugeordnet zu true, siehe unten), führt der Browser sofort das aktuelle js-Skript aus und blockiert nachfolgende Skripte, wenn ein asynchrones Attribut vorhanden ist Das Rendern nachfolgender Dokumentelemente erfolgt parallel zum Laden und Ausführen des aktuellen JS (asynchron). Wenn ein Defer-Attribut vorhanden ist, erfolgt das Laden nachfolgender Dokumentelemente parallel zum Laden des Skripts. js (asynchron), aber die Ausführung von script.js erfolgt in allen Elementen (DOM). Die Analyse ist abgeschlossen, jedoch bevor das DOMContentLoaded-Ereignis ausgelöst wird.
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js' defer='defer'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js' defer='defer'></script>
<script type="text/javascript" src='index.js' defer='defer'></script>
console.log('hello world');
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des asynchronen Ladens von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
