Heim > Web-Frontend > js-Tutorial > Hauptteil

Asynchrone JS-Lademethode

一个新手
Freigeben: 2017-09-21 10:00:14
Original
1817 Leute haben es durchsucht


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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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)
Nach dem Login kopieren

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 == &#39;loaded&#39;||script.readyState ==&#39;complete&#39;){
    script.onreadystatechange = null;
    callback()
}
}  
}else{
    script.onload = function(){
    callback();
}
}
script.src = url;
document.getElementByTagName("head")[0].appendChild(script)
}
Nach dem Login kopieren

Aufrufmethode:

loadScript(&#39;files.js&#39;,function(){
    alert("file is loaded")
})
Nach dem Login kopieren

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);
Nach dem Login kopieren

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!