Chargement asynchrone de fichiers js dans des pages html

Généralement, les js tiers sont introduits directement. Si le tiers est lent, il bloquera le rendu de la page. Lorsque l'utilisateur attend, il verra un espace vide, qui n'est pas un espace. bonne expérience utilisateur. Par conséquent, certains js qui n'ont pas besoin d'être exécutés immédiatement peuvent être chargés de manière asynchrone.

Il existe deux méthodes de chargement, comme suit

Ajoutez async="async" au script

async est un nouvel attribut de html5, et vous pouvez le parcourir dans les versions inférieures Le serveur n'est pas compatible

<script type="text/javascript" async="async" src="http://thirdpart/js.js" ></script>

Utiliser la méthode js pour charger de manière asynchrone

Cette méthode consiste à ajouter un script à la page après avoir écouté le chargement de la page, donc comme pour présenter le fichier js

(function() {
function asyncLoad() {
var src = "http://thirdpart/js.js";
var urls = src.split(",");
var x = document.getElementsByTagName('body');
if(x && x[0]){
for (var i = 0; i < urls.length; i++) {
var s = document.createElement(&#39;script&#39;);
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = urls[i];
x[0].appendChild(s);
}
}
}
window.attachEvent ? window.attachEvent(&#39;onload&#39;, asyncLoad) :
window.addEventListener(&#39;load&#39;, asyncLoad, false);
})();

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!