Mehrere Probleme im Zusammenhang mit dem asynchronen Laden von JavaScript-js-Tutorial-php.cn

Das Standard-JS wird hier synchron geladen und kann nicht als „Herunterladen“, sondern als Parsen verstanden werden. In der neuesten Version des Browsers verwendet der Browser einen Wasserfallstil für die vom Code angeforderten Ressourcen . Das Laden blockiert nicht, aber die Ausführung von js blockiert immer. 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 , die Seite bleibt leer. Sie ist 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 und die Welt Scheint ruhig, 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 ein Stück Code basierend auf dem vorherigen Code hinzugefügt, aber „Hallo Welt“ konnte nicht auf der Konsole ausgegeben werden Offensichtlich hat die vorherige js-Anfrage das Laden des folgenden Codes blockiert. Plötzlich wurde uns klar, dass das Ändern der Ladeposition von js nur das Rendering der Seite ändern kann wird weiterhin blockieren.

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(&#39;script&#39;);
   s.src = &#39;http://china-addthis.googlecode.com/svn/trunk/addthis.js&#39;;
   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(&#39;hello world&#39;);
 </script>
</body>

Nach dem Login kopieren

Es gibt jedoch immer noch ein Problem, das vor dem Laden blockiert ist abgeschlossen. Das Onload-Ereignis wird ausgelöst, und jetzt muss der Code vieler Seiten beim Onload zusätzliche Renderarbeiten ausführen, sodass die Initialisierungsverarbeitung einiger Seiten weiterhin blockiert wird:

<body>
 this is a test
 <script type="text/javascript">
  ~function() {
   // function async_load() {
    var s = document.createElement(&#39;script&#39;);
    s.src = &#39;http://china-addthis.googlecode.com/svn/trunk/addthis.js&#39;;
    document.body.appendChild(s);
   // }
   // window.addEventListener(&#39;load&#39;, async_load, false);
  }();

  window.onload = function() {
   var txt = document.createTextNode(&#39; hello world&#39;);
   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 müssen nur die Kommentare entfernen und die von Google bereitgestellten js beim Laden asynchron starten lassen. 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(&#39;hello world&#39;);
</script>

Nach dem Login kopieren

async ist ein neues Attribut von HTML5. Das async-Attribut legt fest, dass das Skript asynchron ausgeführt wird, sobald es verfügbar ist es wird heruntergeladen).

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(&#39;hello world&#39;);
</script>

Nach dem Login kopieren

Der Umsetzungseffekt scheint ähnlich zu sein, 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.

Sehen Sie sich ein aus dem Internet gestohlenes Bild an:

Die blaue Linie steht für das Lesen im Netzwerk und die rote Linie für die Ausführungszeit, beides für Skripte; die grüne Linie stellt die HTML-Analyse dar.

Dieses Bild verrät uns die folgenden wichtigen Punkte (Auszug aus dem Unterschied zwischen Aufschieben und Asynchronisieren):

Aufschieben und Asynchronisieren sind in Bezug auf das Lesen (Herunterladen) im Netzwerk gleich ), beide sind asynchron (im Vergleich zum HTML-Parsing)
Der Unterschied zwischen ihnen liegt darin, wann das Skript ausgeführt wird, nachdem es heruntergeladen wurde. Offensichtlich kommt die Verzögerung dem Laden unseres Anwendungsskripts am nächsten Ausführungsanforderungen
关于 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(&#39;hello world&#39;);

Nach dem Login kopieren

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