Maison > Article > interface Web > Comment rendre le chargement et l'exécution de JavaScript plus efficaces avec un exemple de code détaillé

Comment rendre le chargement et l'exécution de JavaScript plus efficaces avec un exemple de code détaillé

伊谢尔伦original: 2017-07-21 16:04:031266parcourir

Le script peut être placé en tête de la page html ou dans le corps.

Mettez le script dans le corps. Lorsque le navigateur rencontre la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a, le navigateur ne sait pas si le script insérera du texte ou des balises html, il arrêtera donc d'analyser le html. page et exécutez-le. Lors de l'ajout de scripts à l'aide de src, le navigateur fera la même chose. Le rendu de la page et l'interaction de l'utilisateur seront complètement bloqués pendant le traitement du script. Le téléchargement et l'exécution du script bloquent le téléchargement d'autres ressources, telles que les images utilisées pour afficher la page.
Emplacement du script
Pour les raisons ci-dessus, les scripts doivent toujours être placés en bas de la page, devant 36cc49f0c466276486e50c850b7e4956.
Un exemple simple :

<html> 
<head> 
<title>Script Example</title> 
<link rel="stylesheet" type="text/css" href="styles.css"> 
</head> 
<body> 
<p>Hello world!</p> 
<script type="text/javascript" src="file1.js"></script> 
<script type="text/javascript" src="file2.js"></script> 
<script type="text/javascript" src="file3.js"></script> 
</body> 
</html>

Fusionner les scripts
Étant donné que le téléchargement du script bloque le rendu de la page, la page3f1c4e4b6b16bbbd69b2ee476dc4f83a balises, que le script soit en ligne ou externe. La situation est particulière lorsqu'il s'agit de scripts externes. Le temps nécessaire au navigateur pour télécharger un script de 100 Ko sera bien inférieur à celui de quatre scripts de 25 Ko, car il faut beaucoup de temps pour établir une requête. Par conséquent, la page doit minimiser les références à des scripts externes.
Script non bloquant
Le secret est de charger le script une fois le chargement de la page terminé, c'est-à-dire avant que l'événement onload de l'objet window ne soit déclenché. Voici plusieurs façons d'y parvenir :
1. Utilisez defer

<html> 
<head> 
<title>Script Defer Example</title> 
</head> 
<body> 
<script defer> 
alert("defer"); 
</script> 
<script> 
alert("script"); 
</script> 
<script> 
window.onload = function(){ 
alert("load"); 
}; 
</script> 
</body> 
</html>

L'ordre dans lequel les pop-ups de page apparaissent : script/defer/load. cette technologie est celle d'IE4+ et uniquement prise en charge par FF3.5+.
Scripts non bloquants (suite)
2. Éléments de script dynamiques
Vous devez savoir que 3f1c4e4b6b16bbbd69b2ee476dc4f83a Méthode DOM pour ajouter dynamiquement des références de fichiers de script. La méthode est la suivante :

var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.src = "file1.js"; 
document.getElementsByTagName("head")[0].appendChild(script);

Une fois cette balise ajoutée au html, le fichier script commencera à se télécharger. Une caractéristique de cette méthode est que le téléchargement et l’exécution des fichiers ne bloquent pas le traitement des autres parties de la page HTML. Il est généralement plus sûr de placer de tels scripts dans 93f0f5c25f18dab9d176bd4f6de5d30e que dans 6c04bd5ca3fcae76e30b72ad730ca86d, surtout si le code contenu dans le fichier doit être exécuté lors de l'événement de chargement de la page. Si le contenu du corps n'a pas été complètement chargé, IE affichera également une erreur « opération interdite ».
Lorsque le fichier script est téléchargé, le script sera exécuté immédiatement (FF et Opera attendront l'exécution du script précédent ajouté de la même manière). C'est très bien lorsque le script s'exécute tout seul. Mais si le script contient des interfaces utilisées par d'autres scripts sur la page, vous devez vous assurer que le script est chargé et disponible. Heureusement, Firefox, Opera, Chrome et Safari 3+ déclencheront un événement de chargement après avoir obtenu la valeur src de la balise de script.

var script = document.createElement("script") 
script.type = "text/javascript"; 
//Firefox, Opera, Chrome, Safari 3+ 
script.onload = function(){ 
alert("Script loaded!"); 
}; 
script.src = "file1.js"; 
document.getElementsByTagName("head")[0].appendChild(script);

IE fournit un autre événement de changement d'état prêt pour la solution. Selon l'état de téléchargement du
fichier script, les valeurs de readyState sont les suivantes :
"non initialisé"
État par défaut
"chargement"
Démarrer le téléchargement
"chargé "
Téléchargement terminé
"interactif"
Téléchargement terminé, mais pas tous disponibles
"complet"
Toutes les données disponibles
Implémentation IE :

var script = document.createElement("script") 
script.type = "text/javascript"; 
script.onreadystatechange = function(){ 
if (script.readyState == "loaded" || script.readyState == "complete"){ 
script.onreadystatechange = null; 
alert("Script loaded."); 
} 
}; 
script.src = "file1.js"; 
document.getElementsByTagName("head")[0].appendChild(script);

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résumé du code de quatre méthodes de chargement dynamique JavaScript couramment utiliséesArticle suivant：Résumé du code de quatre méthodes de chargement dynamique JavaScript couramment utilisées

Articles Liés

Voir plus