Asynchrone JS-Lademethode

defer and async

• defer

html4 definiert ein erweitertes Attribut für das Skript-Tag: verschieben. defer gibt an, dass das in diesem Element enthaltene Skript das DOM nicht ändert, sodass der Code sicher zurückgestellt werden kann. Diese Eigenschaft ist jedoch keine ideale browserübergreifende Lösung. Dieses Attribut wird nur von den Browsern IE4+ und Firefox3.5+ unterstützt. Die Verwendung ist wie folgt:

<script type=&#39;text/javascript&#39; src=&#39;test.js&#39; defer></script>

Das „script“-Tag mit dem Defer-Attribut kann an einer beliebigen Stelle im Dokument platziert werden. Wenn eine js-Datei mit dem Defer-Attribut heruntergeladen wird, werden andere nicht blockiert Browser verarbeiten, sodass solche Dateien parallel zu anderen Ressourcen auf der Seite heruntergeladen werden können. Das Skript-Tag mit dem Defer-Attribut wird ausgeführt, nachdem der Dom geladen wurde (bevor das Onload-Ereignis ausgelöst wird)

• async
  Die HTML5-Spezifikation führt die Async ein Attribut für die asynchrone Verwendung. Skript laden.

 <script type=&#39;text/javascript&#39; src=&#39;test.js&#39; async></script>

Das Gleiche zwischen Async und Defer ist, dass paralleles Herunterladen verwendet wird und es während des Downloadvorgangs keine Blockierung gibt. Der Unterschied besteht darin, dass async automatisch ausgeführt wird, nachdem der Ladevorgang abgeschlossen ist, während defer warten muss, bis die Seite abgeschlossen ist.

Dynamische Erstellung von Skripten

Hauptprinzip: Javascript kann fast alle Inhalte in HTML dynamisch erstellen, sodass wir Javascript verwenden können, um Skript-Tags dynamisch zu erstellen und diese zu HTML hinzuzufügen .

var script = document.createElement("script");
  script.type = "text/javasctipt";
  script.src = "file.js";
  document.getElementByTagName("head")[0].appendChild(script)

Wir können die folgende Methode verwenden, um zu verfolgen und sicherzustellen, dass das Skript heruntergeladen und bereit ist:

function loadScript(url,callback){var script = document.createElement("script");
  script.type = "text/javasctipt";  //IE
  if(script.readyState){
        script.onreadystatechange = function(){
            if(script.readyState == 'loaded'||script.readyState =='complete'){
    script.onreadystatechange = null;
    callback()
}
}  
}else{
    script.onload = function(){
    callback();
}
}
script.src = url;
document.getElementByTagName("head")[0].appendChild(script)
}

Aufrufmethode:

loadScript('files.js',function(){
    alert("file is loaded")
})

XMLHttpRequest script Inject

Holen Sie sich das Skript über das XHR-Objekt und injizieren Sie es in die Seite

/获取XMLHttpRequest对象，考虑兼容性。  var getXmlHttp = function(){
    var obj;    if (window.XMLHttpRequest)
      obj = new XMLHttpRequest();    else
      obj = new ActiveXObject("Microsoft.XMLHTTP");    return obj;
  }; 
  //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
  var xmlHttp = getXmlHttp();
  xmlHttp.open("GET", "file3.js", true);

  xmlHttp.onreadystatechange = function(){
    if (xmlHttp.readyState == 4 {    if(xmlHttp.status >=200 && xmlHttp.status<300 || xmlHttp.status == 304){ var script = document.createElement("script");
      script.text = xmlHttp.responseText;
      document.body.appendChild(script);
}
    }
  } 
  xmlHttp.send(null);

Das obige ist der detaillierte Inhalt vonAsynchrone JS-Lademethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!