Analyse des Ladens von Javascript

Dieser Artikel stellt hauptsächlich die Analyse des Javascript-Ladens vor, die einen gewissen Referenzwert hat. Jetzt kann ich ihn mit allen teilen, die ihn benötigen

1 🎜>

(1) Synchrones Laden

Auf einer Webseite lädt der Browser js-Dateien über das 3f1c4e4b6b16bbbd69b2ee476dc4f83a Wie unten gezeigt:

//内嵌脚本
<script type="text/javacript">    
// code here!
</script>
//加载外部脚本
<script type="text/javascript src="path/demo.js"></script>

3f1c4e4b6b16bbbd69b2ee476dc4f83a ist sehr praktisch. Solange es hinzugefügt wird, kann der Browser es lesen und ausführen ;-Tag: Javascript-Dateien werden nacheinander gelesen und dann sofort ausgeführt. Wenn mehrere Dateien voneinander abhängig sind, muss die Datei mit der geringsten Abhängigkeit an erster Stelle und die Datei mit der größten Abhängigkeit platziert werden Andernfalls wird der Code einen Fehler melden. Ich glaube, dass jeder ein tiefes Verständnis dafür hat, wenn er Bootstrap verwendet. Andererseits laden Browser das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag im synchronen Modus, was bedeutet, dass die Seite auf das Laden der JavaScript-Datei wartet, bevor sie den nachfolgenden Code ausführt. Wenn es viele 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags gibt, kann der Browser diese nicht gleichzeitig lesen. Er muss erst das eine und dann das andere lesen, was dazu führt, dass sich die Lesezeit erheblich verlängert und die Seitenreaktion langsam ist betroffen. Der synchrone Modus, auch Blockierungsmodus genannt, verhindert die nachfolgende Verarbeitung durch den Browser und stoppt die nachfolgende Analyse. Erst wenn der aktuelle Ladevorgang abgeschlossen ist, kann der nächste Schritt ausgeführt werden, sodass die synchrone Ausführung standardmäßig sicher ist. Wenn es jedoch Verhaltensweisen wie das Ausgeben von Dokumentinhalten, das Ändern von DOM, Umleitungen usw. in js gibt, führt dies zu einer Blockierung. Daher wird generell empfohlen, das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag am Ende von 6c04bd5ca3fcae76e30b72ad730ca86d zu platzieren, um das Blockieren von Seiten zu reduzieren.

(2) Asynchrones Laden

Um dieses Problem zu lösen, verwendet ES5 die DOM-Methode,

lädt JavaScript-Skriptdateien dynamisch

.

function loadScript(url) {    
var script = document.createElement("script");
    script.type="text/javascript";
    script.src=url;
    document.body.appendChild(script);
}

Diese Methode liest die Javascript-Datei asynchron, indem sie ein neues 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag erstellt und dessen src-Attribut festlegt.

Dies führt nicht zu einer Seitenblockierung, aber es wird ein anderes Problem auftreten. Wenn andere Skriptdateien davon abhängen, gibt es keine Garantie, wann dieses Skript geladen wird.

Eine weitere Lademethode besteht darin, die Attribute

defer und async

zu verwenden, um das Skript asynchron zu laden. Wenn die Rendering-Engine auf diese Befehlszeile stößt, beginnt sie mit dem Herunterladen des externen Skripts, wartet jedoch nicht darauf, dass es heruntergeladen und ausgeführt wird, sondern führt die folgenden Befehle direkt aus. Der Unterschied zwischen „defer“ und „async“ besteht darin, dass „defer“ erst dann ausgeführt wird, wenn die gesamte Seite normal im Speicher gerendert wurde (die DOM-Struktur ist vollständig generiert und andere Skripte werden asynchron ausgeführt, sobald der Download abgeschlossen ist). Führen Sie dieses Skript aus. Fahren Sie später mit dem Rendern fort. Das heißt, Defer wird nach dem Rendern ausgeführt und Async wird nach dem Herunterladen ausgeführt. Wenn mehrere Verzögerungsskripte vorhanden sind, werden diese außerdem in der Reihenfolge geladen, in der sie auf der Seite erscheinen, während mehrere asynchrone Skripte die Ladereihenfolge nicht garantieren können. IE9 und niedriger weisen einige ziemlich schlimme Fehler in der Verzögerungsimplementierung auf, die zu einer nicht garantierten Ausführungsreihenfolge führen. Wenn Sie

9a9097c5776e07f54236d5cd1dc435ae2cacc6d41bbb37262a98f745aa00fbf0
27893951ee31aa4ab68c289425ee4a992cacc6d41bbb37262a98f745aa00fbf0

So wählen Sie „Aufschieben“ und „Asynchron“ aus. Wenn das verwendete Skript ein Modul ist und nicht von anderen Skriptdateien abhängt, verwenden Sie async; wenn das Skript von anderen Skripten abhängt oder von anderen Skripten abhängig ist, verwenden Sie defer, wenn die Skriptdatei klein ist und von einem asynchronen Skript abhängig ist Wenn Sie ein internes Einbettungsskript verwenden, wird diese Datei vor allen asynchronen Skripten platziert.

Eine andere Methode ist das asynchrone Laden des

onload-Ereignisses.

(function(){
    if(window.attachEvent) {
        window.attachEvent("load", asyncLoad);
    } else if(window.addEventListener) {
        window.addEventListener("load", asyncLoad);
    } else {        window.onload = asyncLoad;    }  
    var asyncLoad = function() {
        var script = document.createElement("script");
        script.type="text/javascript";
        script.async = true;
        script.src = ('https:'==document.location.protocol ? 'https://ssl' :  'http:www') + '.baidu.com/demo.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(script, s);
    };
)();

Bei dieser Methode wird die Skripteinfügemethode in eine Funktion eingefügt und dann in der Onload-Methode des Fensters ausgeführt. Dadurch wird das Problem der Blockierung der Auslösung des Onload-Ereignisses gelöst.

Aufgrund der dynamischen Natur von Javascript gibt es viele asynchrone Lademethoden: ") usw.;

XHR-Injection: Rufen Sie Javascript über XMLHttpRequest ab und erstellen Sie dann ein Skriptelement zum Einfügen in die DOM-Struktur. Nachdem die Ajax-Anfrage erfolgreich war, setzen Sie script.text auf den Antworttext, der nach erfolgreicher Anfrage zurückgegeben wird.

var createXHR  = function() {
    var obj;
    if(window.XMLHttpRequest)
        obj = new XMLHttpRequest();
    else
        obj = new ActiveObject("Microsoft.XMLHTTP");
    return obj;
};
var xhr = createXML();
xhr.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
xhr.send();
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        var script = document.createElement("script");
        script.text = xhr.requestText;
        document.getElementsByTagName("head")[0].appendChild(script);
    }
}

Skript im Iframe: Fügen Sie ein Iframe-Element in das übergeordnete Fenster ein und laden Sie dann JS in den Iframe.

var createXHR  = function() {
    var obj;
    if(window.XMLHttpRequest)
        obj = new XMLHttpRequest();
    else
        obj = new ActiveObject("Microsoft.XMLHTTP");
    return obj;
};
var xhr = createXML();
xhr.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
xhr.send();
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        eval(xhr.responseText);
        $('#btn').click(function() {
            alert($(this).text());
        });
    }
}

2. Lazy Loading

        有些JS代码在某些情况下需要使用，并不是页面初始化的时候就要用到。延迟加载就是为解决这个问题。将JS切分成许多模块，页面初始化时只将事件处理程序添加到UI元素上，然后其它JavaScript代码的加载延迟到第一次用户交互或者其他条件需要用到的时候再加载。类似图片的懒加载。这样做的目的是可以渐进式地载入页面，尽可能快地为用户提供目前需要的信息，其余部分的内容可以在用户浏览该页面时在后台载入。

        JavaScript的加载分为两个部分：下载和执行脚本，异步加载只解决了下载的问题，但是代码在下载完成后就可能会立即执行，在执行过程中浏览器储与阻塞状态，响应不了任何需求。为了解决JavaScript延迟加载的问题，可以利用异步加载缓存起来，所以不会立即执行，然后在第一次需要的时候再执行。

        第二部分内容的载入可以用创建动态脚本的形式：

window.onload = function() {    
var script = document.createElement("script");
    script.type="text/javascript";
    script.src="demo.js";
    document.documentElement.firstChild.appendChild("script");
}

3. 按需加载

        可以通过创建一个require方法，包含需要加载的脚本名称和附加脚本加载完成后需要执行的回调函数。

function require(file, callback) {    
var script = document.getElementsByTagName("script")[0];   
var newjs = document.createElement("script");

    newjs.onload= function() {
        callback();
    };
    newjs.src=file;
    script.parentNode.insertBefore(newjs, script);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于javascrip的立即执行函数的解析

深入理解JS正则表达式之REGEXP对象属性的解析

Das obige ist der detaillierte Inhalt vonAnalyse des Ladens von Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!