Laden und Ausführen von Javascript

Zuerst möchte ich über das Laden und Ausführen von Javascript sprechen. Im Allgemeinen weisen Browser zwei Hauptmerkmale für die Ausführung von Javascript auf: 1) Es wird unmittelbar nach dem Laden ausgeführt, 2) wenn es ausgeführt wird, blockiert es den nachfolgenden Inhalt der Seite (einschließlich der Darstellung der Seite und des Herunterladens anderer Ressourcen). Wenn daher mehrere JS-Dateien eingeführt werden, werden diese JS-Dateien für den Browser seriell geladen und nacheinander ausgeführt.

Da Javascript möglicherweise den DOM-Baum des HTML-Dokuments betreibt, laden Browser im Allgemeinen JS-Dateien nicht parallel herunter, wie sie CSS-Dateien parallel herunterladen, da dies durch die Besonderheit von JS-Dateien verursacht wird. Wenn Ihr Javascript also die nachfolgenden DOM-Elemente bedienen möchte, meldet der Browser grundsätzlich eine Fehlermeldung, dass das Objekt nicht gefunden werden kann. Denn wenn Javascript ausgeführt wird, wird das nachfolgende HTML blockiert und es gibt keinen nachfolgenden DOM-Knoten im DOM-Baum. Das Programm hat also einen Fehler gemeldet.

Traditionelle Methode

Wenn Sie also den folgenden Code in den Code schreiben:

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

Im Grunde ist das b7e68224e8a7e8deec4ed32b49fb2620-Tag ausführen können, was richtig ist. Dies gilt für Javascript-Code im selben Skript-Tag, aber für die gesamte Seite wird dies weiterhin blockiert. Das Folgende ist ein Testcode:

<scripttype="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>
<scripttype="text/javascript"language="javascript">
   alert("another block");
</script>

Wie ist Ihrer Meinung nach die Reihenfolge der Warnungen? Sie können es in verschiedenen Browsern ausprobieren. Hier ist die Testseite, die Sie schließen möchten: Beispiel 2.

Script-Defer- und Async-Attribute

IE unterstützt Defer-Tags seit IE6, wie zum Beispiel:

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

Für IE wird dieses Tag verwendet Veranlassen Sie den IE, js-Dateien parallel herunterzuladen und die Ausführung anzuhalten, bis das gesamte DOM geladen ist (DOMContentLoaded). Mehrere defer 3f1c4e4b6b16bbbd69b2ee476dc4f83a werden ebenfalls 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 diese Verzögerung jedoch nur für den IE gilt, wird sie im Allgemeinen seltener verwendet.

Unser Standard-HTML5 fügt auch ein Attribut für das asynchrone Laden von Javascript hinzu: async Egal welchen Wert Sie ihm zuweisen, solange es angezeigt wird, werden js-Dateien asynchron geladen. Das asynchrone Laden weist jedoch ein ernstes Problem auf, das heißt, es setzt die militärische Regel „Sofort nach dem Laden ausführen“ treu um. Obwohl es das Rendern der Seite nicht blockiert, können Sie die Reihenfolge und das Timing nicht steuern seiner Hinrichtung. Schauen Sie sich dieses Beispiel an, um ein Gefühl dafür zu bekommen.

Die Browser, die asynchrone Tags unterstützen, sind: Firefox 3.6, Chrome 8.0, Safari 5.0, IE 10. Opera unterstützt es noch nicht (von hier), daher ist diese Methode nicht sehr gut. Denn nicht alle Browser können das.

Dynamische Erstellung der DOM-Methode

Diese Methode wird wahrscheinlich am häufigsten verwendet.

functionloadjs(script_filename) {
    varscript = 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);
}
varscript ='http://coolshell.cn/asyncjs/alert.js';
loadjs(script);

Diese Methode ist fast zur Standardmethode zum asynchronen Laden von JS-Dateien geworden. Eine Demonstration dieser Methode finden Sie unter: Beispiel 3. Diese Methode wurde auch von JSONP ausgenutzt, d Funktion. Sie können sich dieses Beispiel ansehen: t.js (Dieses Beispiel ist ein kleines Beispiel für asynchrone Ajax-Aufrufe, die ich zuvor auf Weibo gesammelt habe)

Js bei Bedarf asynchron laden

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

Zum Beispiel:

Gebunden an das window.load-Ereignis – Beispiel 4

Sie müssen die Ausführungsunterschiede zwischen Beispiel 4 und Beispiel 3 vergleichen. Ich werde beide Beispiele speziell verwenden ein Code-Hervorhebungs-Javascript. Schauen Sie sich die Ausführung des Code-Hervorhebungsskripts und die Ausführung meines Alert.js an, und Sie werden den Unterschied erkennen.)

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

An ein bestimmtes Ereignis knüpfen - Beispiel 5

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

    这个示例很简单了。当你点击某个DOM元素，才会真正载入我们的alert.js。

更多

但是，绑定在某个特定事件上这个事似乎又过了一点，因为只有在点击的时候才会去真正的下载js，这又会太慢了了。好了，到这里，要抛出我们的终极问题——我们想要异步地把js文件下载到用户的本地，但是不执行，仅当在我们想要执行的时候去执行。

要是我们有下面这样的方式就好了：

varscript = document.createElement("script");
script.noexecute =true;
script.src ="alert.js";
document.body.appendChild(script);
//后面我们可以这么干
script.execute();

    可惜的是，这只是一个美丽的梦想，今天我们的Javascript还比较原始，这个“JS梦”还没有实现呢。

所以，我们的程序员只能使用hack的方式来搞。

有的程序员使用了非标准的script的type来cache javascript。如：

<scripttype=cache/scriptsrc="./alert.js"></script>

    因为”cache/script”，这个东西根本就不能被浏览器解析，所以浏览器也就不能把alert.js当javascript去执行，但是他又要去下载js文件，所以就可以搞定了。可惜的是，webkit严格符从了HTML的标准——对于这种不认识的东西，直接删除，什么也不干。于是，我们的梦又破了。

所以，我们需要再hack一下，就像N多年前玩preload图片那样，我们可以动用object标签（也可以动用iframe标签），于是我们有下面这样的代码：

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

    然后，我们在的最后调用一下这个函数。请参看一下相关的示例：示例六

在Chrome下按 Ctrl+Shit+I，切换到network页，你就可以看到下载了alert.js但是没有执行，然后我们再用示例五的方式，因为浏览器端有缓存了，不会再从服务器上下载alert.js了。所以，就能保证执行速度了。

关于这种preload这种东西你应该不会陌生了。你还可以使用Ajax的方式，如：

varxhr =newXMLHttpRequest();
xhr.open('GET','new.js');
xhr.send('');

    到这里我就不再多说了，也不给示例了，大家可以自己试试去。

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