Présentation
Avant de pouvoir afficher une page, le navigateur doit créer l'arborescence DOM en analysant le balisage HTML. Au cours de ce processus, chaque fois que l'analyseur rencontre un script, il doit s'arrêter et l'exécuter. avant de pouvoir poursuivre l'analyse du code HTML. Dans le cas d'un script externe, l'analyseur est également forcé d'attendre le téléchargement de la ressource, ce qui peut entraîner un ou plusieurs allers-retours réseau et retarder le premier affichage de la page. Voir <ph type="x-smartling-placeholder"></ph> Ajout de l'interactivité avec JavaScript pour en savoir plus sur la façon dont JavaScript affecte les le chemin de rendu.Recommandations
Vous devez éviter et minimiser l'utilisation du blocage de JavaScript, en particulier les scripts externes qui doivent être récupérées avant de pouvoir être exécutées. Scripts nécessaires à l'affichage du contenu de la page peuvent être intégrées pour éviter les demandes réseau supplémentaires, mais le contenu intégré doit être court et doivent s'exécuter rapidement pour offrir de bonnes performances. Scripts qui ne sont pas essentiels à la configuration initiale le rendu doit être asynchrone ou différé jusqu'au premier rendu. N'oubliez pas que pour améliorer le temps de chargement, vous devez également optimiser la diffusion des CSS.Intégrer le code JavaScript
Les scripts bloquants externes obligent le navigateur à attendre la récupération du code JavaScript, ce qui peut ajouter un ou plusieurs allers-retours réseau avant que la page puisse s'afficher. Si l'adresse e-mail les scripts sont peu volumineux, vous pouvez intégrer leur contenu directement dans le document HTML et éviter la latence des requêtes réseau. Par exemple, si le document HTML ressemble à ce qui suit :<html> <head> <script type="text/javascript" src="small.js"></script> </head> <body> <div> Hello, world! </div> </body> </html>
small.js
se présente comme suit:
/* contents of a small JavaScript file */
<html> <head> <script type="text/javascript"> /* contents of a small JavaScript file */ </script> </head> <body> <div> Hello, world! </div> </body> </html>
small.js
et permet
au navigateur pour accélérer
le premier rendu. Notez toutefois que l'intégration augmente
la taille du document HTML et que le même contenu de script devra peut-être être intégré dans
plusieurs pages. Par conséquent, vous ne devez intégrer que de petits scripts afin d'optimiser les performances.
Rendre JavaScript asynchrone
Par défaut, JavaScript bloque la construction DOM et retarde donc le délai de premier rendu. À empêcher JavaScript de bloquer l'analyseur, nous vous recommandons d'utiliser le code HTMLasync
.
sur des scripts externes. Exemple :
<script async src="my.js">
document.write
Scripts qui dépendent de l'ordre d'exécution, ou qui doivent accéder à un élément ou le modifier
il peut être nécessaire de réécrire le DOM ou le CSSOM de la page pour tenir compte de ces contraintes.
Reporter le chargement d'un fichier JavaScript
Le chargement et l'exécution de scripts qui ne sont pas nécessaires à l'affichage initial de la page reporté jusqu'à la fin de l'affichage initial ou d'autres parties essentielles de la page chargement en cours. Cela peut contribuer à réduire les conflits de ressources et améliorer les performances.Questions fréquentes
- Que dois-je faire si j'utilise une bibliothèque JavaScript telle que jQuery ?
- De nombreuses bibliothèques JavaScript, comme JQuery, sont utilisées pour améliorer la page à ajouter de l'interactivité, des animations et d'autres effets. Cependant, nombre d'entre eux peuvent être ajoutés en toute sécurité après l'affichage du contenu au-dessus de la ligne de flottaison. Envisagez de rendre le code JavaScript asynchrone ou différez son chargement.
- Que se passe-t-il si j'utilise un framework JavaScript pour construire la page ?
- Si le contenu de la page est construit par JavaScript côté client, vous devez envisager d'intégrer les modules JavaScript appropriés pour éviter les allers-retours réseau. De même, l'affichage côté serveur peut considérablement améliorer les performances de chargement de la première page: afficher les modèles JavaScript sur le serveur pour diffuser un premier rendu rapide, puis utilisez les modèles côté client une fois la page chargée. Pour plus plus d'informations sur l'affichage côté serveur, reportez-vous à la section http://youtu.be/VKTWdaupft0?t=14m28s.
Commentaires
Cette page vous a-t-elle été utile ?
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">