Drei Möglichkeiten, das asynchrone Laden von JS zu realisieren

1. Warum asynchrones Laden schreiben :

① Das Laden von JS selbst ist ein synchrones Laden . Das Laden von js-Dateien blockiert das Dokument . Sobald die Netzwerkgeschwindigkeit nicht gut ist, wartet die gesamte Website darauf, dass js geladen wird, ohne nachfolgendes Rendern und andere Arbeiten durchzuführen. Einige Tools und Methoden müssen jedoch bei Bedarf geladen werden , und einige Tool-js-Dateien ändern die Seite nicht und werden geladen, wenn sie verwendet werden.

② Aber in der tatsächlichen Entwicklung müssen wir nur das Skript-Tag am Ende der Seite platzieren. Es muss überhaupt kein redundanter Code geschrieben werden, aber das Laden auf Abruf muss die oberste Priorität des Interviews sein! ! !

2. Drei Lösungen für das asynchrone Laden von JS:

①aufschieben

 Defer-Attribut im Skript-Tag hinzufügen, asynchrones Laden

1. Aber es wird nicht ausgeführt, bis alle Dom-Dokumente geparst sind (Dom-Baum-Generierung).

2. Nur IE kann verwendet werden;

② asynchron

Fügen Sie das async-Attribut zum script-Tag hinzu, um asynchron zu laden

1. Nach dem Laden ausführen, async kann nur externe Skripte laden

2. Sie können js nicht in das script-Tag schreiben.

3. w3c-Standard, unter IE9 nicht unterstützt

③ Eine funktionskompatible asynchron geladene js-Datei kapseln und die Funktionen in der Datei bei Bedarf ausführen (load on demand)

<script>
        function loadScript(url,callback){
            //url是按需加载的js文件
            //callback是按需加载的js文件中某个函数

            // 1. 创建一个script标签
            var script = document.createElement('script');    
            // 处理ie的兼容
            if(script.readyState){
                script.onreadystatechange = function(){
                    // 如果script已经下载完成
                    if(script.readyState == 'complete' || script.readyState == 'loaded'){
                        callback();
                    }
                }
            }else{
                // 监听script的下载的状态 当状态变为下载完成后 再执行callback
                script.onload = function(){
                    callback();
                }
            }
            //在后面引入的目的是如果在IE上如果下载太快（比读程序还快）
            //IE的readystatechange 事件检测状态码的时候，它早已经从loading变成complete或者loaded（以极快的速度加载完了文件，你还没来得及检测）
            // 那你再检测它就不会变了，它一直都是complete或者loaded
            //这个时候就是马后炮了，检测也没用了。
            // 2. 给script标签添加src 引入一个js文件
            script.src = url;
            // 3. 追加到body
            document.body.appendChild(script);
        }
    </script>

3. Die letzte Ergänzung: drei Dokumentstände

 ①loading loading state, der Dombaum wird gezeichnet

 ②interaktiver aktiver Zustand, das Zeichnen des Dombaums ist abgeschlossen

③vollständiger Fertigstellungsstatus (die alte Version des Browsers kann geladen werden), die Dom-Baumzeichnung ist abgeschlossen und alle Ressourcen-Downloads sind abgeschlossen

Dies wird für die Bequemlichkeit der zukünftigen Verwendung aufgezeichnet, und ich hoffe, dass die großen Jungs mehr kommunizieren, viele Nachrichten hinterlassen und auf meine Mängel hinweisen können!

Freunde in Not können forschen! !

Drei Möglichkeiten, das asynchrone Laden von JS zu realisieren

おすすめ