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

Il s'agit de créer dynamiquement une balise de script et de l'insérer dans la page au bon moment. Nous pouvons utiliser cette méthode pour charger les fichiers selon les besoins et également spécifier l'ordre de chargement du script. .

3 L'injection de script XMLHttpRequest

consiste à obtenir le script via XHR, puis à créer une balise de script dans la fonction de rappel et à l'insérer dans la page

Méthode recommandée

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!