Maison > Article > interface Web > Comment optimiser le chargement du script
Si on référence simplement le script en head ou body, puisqu'on ne sait pas si le DOM sera modifié, le script bloquera complètement le rendu de la page lors du téléchargement et de l'exécution.
Si le script est au milieu de la tête ou du corps, il est très probable qu'une page blanche apparaisse, l'interaction de l'utilisateur ne sera pas possible et l'expérience utilisateur sera très mauvaise.
Même si les fichiers javascript peuvent être téléchargés en parallèle, le processus de téléchargement affectera le téléchargement des images et d'autres ressources.
Donc, ce que nous devons faire en premier est :
Placez la balise de script au bas du corps
Parce qu'il y a des frais généraux de performances supplémentaires ; , comme la négociation à trois, essayez donc de réduire les requêtes HTTP :
Fusionner les fichiers javascript en un seul
Charger plusieurs fichiers javascript en une seule requête
🎜>Mais ce qui précède ne résout pas notre problème. Un gros fichier javascript téléchargera le script d'exécution pendant une longue période, le navigateur ne pourra pas faire autre chose. Cela nécessite des scripts non bloquants, c'est-à-dire que le code javascript n'est chargé qu'après le chargement de la page, c'est-à-dire que le script est téléchargé après le déclenchement de l'événement de chargement de l'objet fenêtre.1 script Delay
defer : Tout d'abord, nous devons nous assurer que le script ne modifiera pas le DOM, car l'ajouter indique au navigateur que ce script ne modifiera pas le DOM et peut être exécuté après le chargement de la page. Après avoir ajouté cet attribut à la balise script, le fichier peut être téléchargé en parallèle avec d'autres ressources.IE ne prend pas en charge le defer à partir d'IE10
async : La différence avec le defer est qu'il sera exécuté une fois le téléchargement terminé, mais le defer ne sera pas exécuté tant que la page n'est pas chargée
2 Script dynamique
3 L'injection de script XMLHttpRequest
Ajoutez d'abord le script requis pour le chargement dynamique, rendez-le aussi simple que possible et ajoutez une fonction pour charger le script
Appelez la fonction dans la balise script pour charger d'autres scripts
Bien sûr, il existe également des bibliothèques à chargement paresseux qui peuvent être utilisées.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!