Méthode de chargement asynchrone JS

defer et async

• defer

html4 définit un attribut étendu pour la balise script : reporter. defer spécifie que le script contenu dans cet élément ne modifiera pas le DOM, le code peut donc être différé en toute sécurité. Mais cette propriété n’est pas une solution multi-navigateurs idéale. Cet attribut n'est pris en charge que par les navigateurs IE4+ et Firefox3.5+. L'utilisation est la suivante :

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

La balise ''script'' avec l'attribut defer peut être placée n'importe où dans le document Lorsqu'un fichier js avec l'attribut defer est téléchargé, il ne bloquera pas les autres. navigateurs. processus afin que ces fichiers puissent être téléchargés en parallèle avec d’autres ressources de la page. La balise de script avec l'attribut defer est exécutée après le chargement du dom (avant le déclenchement de l'événement onload)

• async
  La spécification HTML5 introduit l'async attribut pour une utilisation asynchrone Charger le script.

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

La même chose entre async et defer est qu'il utilise le téléchargement parallèle et qu'il n'y aura aucun blocage pendant le processus de téléchargement. La différence est que async est automatiquement exécuté une fois le chargement terminé, tandis que defer doit attendre que la page soit terminée.

Création dynamique de script

Principe principal : javascript peut créer dynamiquement presque tout le contenu en html, nous pouvons donc utiliser javascript pour créer dynamiquement des balises de script et les ajouter au html .

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

Nous pouvons utiliser la méthode suivante pour suivre et garantir que le script est téléchargé et prêt :

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)
}

Méthode d'appel :

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

Script XMLHttpRequest Injecter

Récupérer le script via l'objet XHR et l'injecter dans la page

/获取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);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!