Detaillierte Erklärung des Ladens und Ausführens in JavaScript

Im Anschluss an den vorherigen Artikel „Einführung in die Browser-Rendering-Prinzipien“ geht es in diesem Artikel um das Laden und Ausführen von JavaScript.

Im Allgemeinen verfügen Browser über zwei Hauptfunktionen zum Ausführen von JavaScript:

1) Sofort nach dem Laden ausführen

2 ) Wird nachfolgend blockiert Inhalt der Seite (einschließlich Seitenrendering und Download anderer Ressourcen) bei Ausführung

Wenn also mehrere JS-Dateien eingeführt werden, werden diese JS-Dateien für den Browser nacheinander geladen und nacheinander ausgeführt ein anderer.

Da JavaScript möglicherweise den DOM-Baum von HTML-Dokumenten verwaltet, laden Browser im Allgemeinen JS-Dateien nicht parallel herunter, wie sie CSS-Dateien parallel herunterladen. Dies liegt an der Besonderheit von JS-Dateien. Wenn Ihr JavaScript die nachfolgenden DOM-Elemente bedienen möchte, meldet der Browser daher eine Fehlermeldung, dass das Objekt nicht gefunden werden kann. Dies liegt daran, dass der nachfolgende HTML-Code blockiert wird, wenn JavaScript ausgeführt wird, und beim Betrieb des DOM keine nachfolgenden Knoten vorhanden sind Baum.

Der traditionelle Weg

Wenn Sie Code wie diesen schreiben:

<script type="text/javascript"  src="http://coolshell.cn/asyncjs/alert.js"></script>

Grundlegend Im Allgemeinen blockiert das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag im Header das Laden nachfolgender Ressourcen und die Generierung der gesamten Seite. Im obigen Beispiel gibt es beispielsweise nur einen JS-Code (Beispiel):

alert(“hello world”) ;

Der Effekt besteht darin, dass beim Laden dieser JS-Datei ein Dialogfeld angezeigt wird, sodass nur nachfolgende Ressourcen geladen werden Geben Sie nach dem Klicken auf dieses Dialogfeld die gesamte Seite ein und generieren Sie sie.

Daher setzen viele Websites js am Ende der Webseite oder verwenden Ereignisse wie window.load, $(document).ready(function(){}).

Da die meisten JavaScript-Codes nicht auf die Seite warten müssen, benötigen wir außerdem eine asynchrone Ladefunktion. Wie laden wir es also asynchron?

document.write-Methode

Sie denken vielleicht, dass die document.write()-Methode das Nichtblockieren lösen kann Verfahren. Durch das Schreiben des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags über die document.write-Methode können Sie die folgenden Dinge ausführen. Dies gilt für JS-Code innerhalb desselben Skript-Tags. Es wird jedoch weiterhin die gesamte Seite blockiert. Das Folgende ist ein Testcode (Beispiel):

<script type="text/javascript" language="javascript">
    function loadjs(script_filename) {
        document.write(&#39;<&#39; + &#39;script language="javascript" type="text/javascript"&#39;);
        document.write(&#39; src="&#39; + script_filename + &#39;">&#39;);
        document.write(&#39;<&#39;+&#39;/script&#39;+&#39;>&#39;);
        alert("loadjs() exit...");
    } 
    var script = &#39;http://coolshell.cn/asyncjs/alert.js&#39;;
 
    loadjs(script);
    alert("loadjs() finished!");</script>
 <script type="text/javascript" language="javascript">
   alert("another block");</script>

Das angezeigte Dialogfeld lautet:

loadjs() exit...
loadjs() finished!
hello world
another block

Dann wird die Seite angezeigt.

Script-Defer- und Async-AttributeAttribute

IE verwendet das Defer-Tag seit IE6 , wie zum Beispiel:

<script defer type="text/javascript" src="./alert.js" ></script>

Für IE führt dieses Tag dazu, dass IE die JS-Datei parallel herunterlädt und ihre Ausführung anhält, bis das gesamte DOM geladen ist werden während der Ausführung in der Reihenfolge ausgeführt, in der sie angezeigt werden. Das Wichtigste ist, dass nach dem Hinzufügen von 3f1c4e4b6b16bbbd69b2ee476dc4f83a das nachfolgende DOM-Rendering nicht blockiert wird. Da „ref“ jedoch nur für den IE gilt, wird es im Allgemeinen seltener verwendet.

Unser HTML 5 fügt außerdem ein Attribut für das asynchrone Laden von JavaScript hinzu: async. Unabhängig davon, welchen Wert Sie ihm zuweisen, wird die JS-Datei asynchron geladen, solange er angezeigt wird. Das asynchrone Laden von async weist jedoch ein ernstes Problem auf, nämlich die treue Ausführung der Regel „Sofort nach dem Laden ausführen“. Obwohl die Darstellung der Seite dadurch nicht blockiert wird, können Sie daher die Reihenfolge und den Zeitpunkt ihrer Ausführung nicht steuern (Beispiel).

Die folgenden Browser unterstützen das Async-Tag: Opera unterstützt es noch nicht (von hier aus), daher ist diese Methode nicht sehr gut.

So erstellen Sie DOM dynamisch

Diese Methode ist wahrscheinlich die am häufigsten verwendete.

function loadjs(script_filename) {   
       var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', script_filename);
    script.setAttribute('id', 'coolshell_script_id');
 
    script_id = document.getElementById('coolshell_script_id');    if(script_id){
        document.getElementsByTagName('head')[0].removeChild(script_id);
    }
    document.getElementsByTagName('head')[0].appendChild(script);
} 
var script = 'http://coolshell.cn/asyncjs/alert.js';
loadjs(script);

Diese Methode ist fast zur Standardmethode zum asynchronen Laden von JS-Dateien geworden (Beispiel). Diese Methode funktioniert auch mit JSONP-Sachen. Das heißt, wir können ein Hintergrundskript (z. B. PHP) für den Quellcode des Skripts angeben, und dieses PHP gibt eine JavaScript-Funktion zurück, deren Parameter eine JSON-Zeichenfolge ist, die zum Aufrufen unserer vordefinierten JavaScript-Funktion zurückgegeben wird. Das Referenzbeispiel des Autors: t.js (Dieses Beispiel ist ein kleines Beispiel für einen asynchronen Ajax-Aufruf, den der Autor zuvor auf Weibo angefordert hat)

Asynchrones Laden von JS bei Bedarf

Das obige Beispiel einer DOM-Methode löst das Problem des asynchronen Ladens von JavaScript, aber es löst nicht das Problem, dass wir möchten, dass es zu dem von mir angegebenen Zeitpunkt ausgeführt wird. Daher müssen wir die obige DOM-Methode an ein bestimmtes Ereignis binden.

Zum Beispiel:

1) An das window.load-Ereignis binden (Beispiel)

window.load = loadjs("http://coolshell.cn/asyncjs/alert.js")

2) An a binden spezifisch bei Ereignissen (Beispiel)

<p style="cursor: pointer" onclick="LoadJS()">Click to load alert.js </p>

Wenn wir beispielsweise auf ein DOM-Element klicken, wird unsere JS-Datei geladen.

Mehr

有的人可能会觉得绑定在某个特定事件上似乎过了一点，而在点击时才载入JS又太慢了。这里抛出一个终极问题：我们想要异步地把JS文件下载到用户本地，但是又不执行，仅当我们想要执行的时候才去执行。

作者提出了一种方式，就像多年之前玩preload图片那样，我们可以动用 object 标签（也可以使用 iframe 标签），于是有了下面的代码（示例）：

function cachejs(script_filename){   
       var cache = document.createElement('object');
    cache.data = script_filename;
    cache.id = "coolshell_script_cache_id";
    cache.width = 0;
    cache.height = 0;
    document.body.appendChild(cache);
}

在Chrome 下按F12（或者Ctrl+Shit+I），切换到 network页，可以看到 alert.js 文件已经下载了但是却没有执行弹出 "hello,world"对话框的操作。然后我们再用之前“绑在特定的事件上”的方式，因为浏览器端有缓存了，不会在从服务器上下载 alert.js 文件了，这样就能保证执行速度了。

我们还可以用Ajax的方式，比如：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'new.js');
xhr.send('');

最后再提两个JS库，一个是ControlJS，一个叫HeadJS，专门用来做异步load javascript文件的。

来源：JavaScript 的装载和执行

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Ladens und Ausführens in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!