Detaillierte Erläuterung des asynchronen Ladens von JavaScript-Mini-Programmentwicklung-php.cn

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=&#39;http://china-addthis.googlecode.com/svn/trunk/addthis.js&#39;></script>
<script type="text/javascript" src=&#39;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&#39;></script>
this is a test

Nach dem Login kopieren

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=&#39;http://china-addthis.googlecode.com/svn/trunk/addthis.js&#39;></script>
<script type="text/javascript" src=&#39;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&#39;></script>

Nach dem Login kopieren

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=&#39;http://china-addthis.googlecode.com/svn/trunk/addthis.js&#39;></script>
<script type="text/javascript" src=&#39;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&#39;></script>

Nach dem Login kopieren

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=&#39;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&#39;></script>
 <script type="text/javascript">
  console.log('hello world');
 </script>
</body>

Nach dem Login kopieren

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=&#39;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&#39;></script>
</body>

Nach dem Login kopieren

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=&#39;http://china-addthis.googlecode.com/svn/trunk/addthis.js&#39; async=&#39;async&#39;></script>
<script type="text/javascript" src=&#39;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&#39;></script>
<script type="text/javascript">
 console.log('hello world');
</script>

Nach dem Login kopieren

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=&#39;http://china-addthis.googlecode.com/svn/trunk/addthis.js&#39; defer=&#39;defer&#39;></script>
<script type="text/javascript" src=&#39;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&#39;></script>
<script type="text/javascript">
 console.log('hello world');
</script>

Nach dem Login kopieren

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.

来看一张网上盗的图：

蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。

此图告诉我们以下几个要点（摘自defer和async的区别）：

defer 和 async 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）
它俩的差别在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的
关于 defer，此图未尽之处在于它是按照加载顺序执行脚本的，这一点要善加利用
async 则是一个乱序执行的主，反正对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行
仔细想想，async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics

但是在我看来（以下个人理解，如有出入还望指出），defer在异步加载上的应用并不会比async广。async的英文解释是异步，该属性作用在脚本上，使得脚本加载（下载）完后随即开始执行，和动态插入script标签作用类似（async只支持h5，后者能兼容浏览器）；而defer的英文解释是延迟，作用也和字面解释类似，延迟脚本的执行，使得dom元素加载完后才开始有序执行脚本，因为有序，所以会带来另一个问题：

this is a test
<script type="text/javascript" src=&#39;http://china-addthis.googlecode.com/svn/trunk/addthis.js&#39; defer=&#39;defer&#39;></script>
<script type="text/javascript" src=&#39;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&#39; defer=&#39;defer&#39;></script>
<script type="text/javascript" src=&#39;index.js&#39; defer=&#39;defer&#39;></script>
console.log('hello world');

Nach dem Login kopieren

如果执行这段代码，控制台的“hello world”也会迟迟得不到结果。所以我觉得还是async好用，如果要考虑依赖的话，可以选择requirejs、seajs等模块加载器。