• La position compte
  • Async et defer
  • Comparaison des performances
    • Pas defer ou async, dans la tête
    • Pas de defer ou d’async, dans le corps
    • Avec async, dans la tête
    • Avec defer, dans la tête
  • Blocage de l’analyse syntaxique
  • Blocage du rendu
  • domInteractive
  • Maintien de l’ordre
  • Dites-moi simplement la meilleure façon

Lorsque vous chargez un script sur une page HTML, vous devez faire attention à ne pas nuire aux performances de chargement de la page.

Un script est traditionnellement inclus dans la page de cette manière :

<script src="https://flaviocopes.com/javascript-async-defer/script.js"></script>

chaque fois que l’analyseur HTML trouve cette ligne, une requête sera faite pour aller chercher le script, et le script sera exécuté.

Une fois ce processus terminé, l’analyse syntaxique peut reprendre, et le reste du HTML peut être analysé.

Comme vous pouvez l’imaginer, cette opération peut avoir un impact énorme sur le temps de chargement de la page.

Si le script prend un peu plus de temps à charger que prévu, par exemple si le réseau est un peu lent ou si vous êtes sur un appareil mobile et que la connexion est un peu négligée, le visiteur verra probablement une page blanche jusqu’à ce que le script soit chargé et exécuté.

La position compte

Lorsque vous apprenez le HTML pour la première fois, on vous dit que les balises de script vivent dans la balise <head>:

<html> <head> <title>Title</title> <script src="https://flaviocopes.com/javascript-async-defer/script.js"></script> </head> <body> ... </body></html>

Comme je vous l’ai dit plus tôt, lorsque l’analyseur syntaxique trouve cette ligne, il va chercher le script et l’exécute. Puis, après avoir effectué cette tâche, il passe à l’analyse du corps.

C’est mauvais car il y a beaucoup de retard introduit. Une solution très courante à ce problème est de mettre la balise script en bas de la page, juste avant la balise de fermeture </body>.

En faisant cela, le script est chargé et exécuté après que toute la page est déjà analysée et chargée, ce qui est une énorme amélioration par rapport à l’alternative head.

C’est la meilleure chose que vous pouvez faire si vous avez besoin de supporter les anciens navigateurs qui ne supportent pas deux fonctionnalités relativement récentes du HTML : async et defer.

Async et Defer

Les deux async et defer sont des attributs booléens. Leur utilisation est similaire :

<script async src="https://flaviocopes.com/javascript-async-defer/script.js"></script>
<script defer src="https://flaviocopes.com/javascript-async-defer/script.js"></script>

si vous spécifiez les deux, async est prioritaire sur les navigateurs modernes, tandis que les navigateurs plus anciens qui supportent defer mais pas async se replieront sur defer.

Ces attributs n’ont de sens que lorsque vous utilisez le script dans la partie head de la page, et ils sont inutiles si vous mettez le script dans le body pied de page comme nous l’avons vu ci-dessus.

Comparaison des performances

Pas de defer ou d’async, dans la tête

Voici comment une page charge un script sans defer ni async, mis dans la partie head de la page:

L’analyse syntaxique est mise en pause jusqu’à ce que le script soit récupéré, et exécuté. Une fois que c’est fait, le parsing reprend.

Pas de defer ou d’async, dans le corps

Voici comment une page charge un script sans defer ou async, mis à la fin de la balise body, juste avant qu’elle ne se ferme:

Le parsing est fait sans aucune pause, et quand il se termine, le script est récupéré, et exécuté. Le parsing est fait avant même que le script ne soit téléchargé, donc la page apparaît à l’utilisateur bien avant l’exemple précédent.

Avec asynchrone, dans la tête

Voici comment une page charge un script avec async, mis dans la balise head:

Le script est récupéré de manière asynchrone, et quand il est prêt, le parsing HTML est mis en pause pour exécuter le script, puis il est repris.

Avec defer, dans la tête

Voici comment une page charge un script avec defer, mis dans la balise head:

Le script est récupéré de manière asynchrone, et il n’est exécuté qu’une fois le parsing HTML terminé.

Le parsing se termine comme lorsque nous mettons le script à la fin de la balise body, mais globalement l’exécution du script se termine bien avant, car le script a été téléchargé en parallèle avec le parsing HTML.

C’est donc la solution gagnante en termes de vitesse 🏆

Blocage du parsing

async bloque le parsing de la page alors que defer ne le fait pas.

Blocage du rendering

Ni async ni defer ne garantissent quoi que ce soit sur le blocage du rendering. Cela dépend de vous et de votre script (par exemple, s’assurer que vos scripts s’exécutent après l’événement onLoad).

domInteractive

Les scripts marqués defer sont exécutés juste après l’événement domInteractive, qui se produit après que le HTML soit chargé, analysé et que le DOM soit construit.

Les CSS et les images à ce stade doivent encore être analysés et chargés.

Une fois que cela est fait, le navigateur émet l’événement domComplete, puis onLoad.

domInteractive est important car son timing est reconnu comme une mesure de la vitesse de chargement perçue. Voir le MDN pour en savoir plus.

Garder les choses en ordre

Un autre cas pro defer : les scripts marqués async sont exécutés dans l’ordre occasionnel, lorsqu’ils deviennent disponibles. Les scripts marqués defer sont exécutés (après la fin de l’analyse syntaxique) dans l’ordre dans lequel ils sont définis dans le balisage.

Dites-moi la meilleure façon

La meilleure chose à faire pour accélérer le chargement de votre page lorsque vous utilisez des scripts est de les mettre dans le head, et d’ajouter un attribut defer à votre balise script:

<script defer src="https://flaviocopes.com/javascript-async-defer/script.js"></script>

C’est le scénario qui déclenche l’événement domInteractive plus rapide.

Considérant les avantages de defer, est semble un meilleur choix que async dans une variété de scénarios.

À moins que vous soyez d’accord pour retarder le premier rendu de la page, assurez-vous que lorsque la page est analysée le JavaScript que vous voulez est déjà exécuté.

Téléchargez mon manuel gratuit pour débutants en JavaScript

Plus de tutoriels sur les navigateurs :

  • Certaines astuces utiles disponibles en HTML5
  • Comment j’ai fait fonctionner un site web basé sur un CMS-.hors ligne
  • Le guide complet des applications Web progressives
  • L’API Fetch
  • Le guide de l’API Push
  • L’API de messagerie Channel. API
  • Tutoriel sur les travailleurs de service
  • Guide de l’API de mise en cache
  • Guide de l’API de notification
  • Plongez-vous dans IndexedDB
  • L’API de sélecteurs : querySelector et querySelectorAll
  • Chargez efficacement JavaScript avec defer et async
  • Le modèle d’objet de document (DOM)
  • L’API de stockage Web : stockage local et stockage de session
  • Apprendre comment fonctionnent les cookies HTTP
  • L’API d’historique
  • Le format d’image WebP
  • XMLHttpRequest (XHR)
  • Un tutoriel SVG approfondi
  • Que sont les URL de données
  • Plan de route pour apprendre la plate-forme Web
  • CORS, Cross-Origin Resource Sharing
  • Web Workers
  • Le guide requestAnimationFrame()
  • Qu’est-ce que le Doctype
  • Travailler avec la DevTools. Console et l’API Console
  • L’API Speech Synthesis
  • Comment attendre l’événement DOM ready en JavaScript simple
  • Comment ajouter une classe à un élément DOM élément
  • Comment boucler sur les éléments DOM à partir de querySelectorAll
  • Comment supprimer une classe d’un élément DOM
  • Comment vérifier si un élément DOM a une classe
  • Comment changer la valeur d’un nœud DOM
  • Comment ajouter un événement de clic à une liste d’éléments DOM retournés par querySelectorAll
  • WebRTC, l’API Web en temps réel
  • Comment obtenir la position de défilement d’un élément en JavaScript
  • Comment remplacer un élément du DOM
  • Comment n’accepter que des images dans un champ de fichier de saisie
  • Pourquoi utiliser une version de prévisualisation d’un navigateur ?
  • L’objet Blob
  • L’objet Fichier
  • L’objet FileReader
  • L’objet FileList
  • ArrayBuffer
  • ArrayBufferView
  • L’objet URL
  • Typed Arrays
  • L’objet DataView
  • L’API BroadcastChannel
  • L’API Streams
  • L’objet FormData
  • L’objet Navigator
  • Comment utiliser l’API Geolocation

    • .

  • Comment utiliser getUserMedia()
  • Comment utiliser l’API de glisser-déposer
  • Comment travailler avec le défilement sur les pages Web
  • Gestion des formulaires en JavaScript
  • Événements clavier
  • Événements souris
  • Événements clavier
  • . événements
  • Événements tactiles
  • Comment supprimer tous les enfants d’un élément DOM
  • Comment créer un attribut HTML en utilisant vanilla Javascript
  • Comment vérifier si une case à cocher est cochée en utilisant JavaScript ?
  • Comment copier dans le presse-papiers en utilisant JavaScript
  • Comment désactiver un bouton en utilisant JavaScript
  • Comment rendre une page modifiable dans le navigateur
  • Comment… obtenir des valeurs de chaîne de requête en JavaScript avec URLSearchParams
  • Comment supprimer toutes les CSS d’une page en une seule fois
  • Comment utiliser insertAdjacentHTML
  • Safari, avertir avant de quitter
  • Comment ajouter une image au DOM en utilisant JavaScript
  • Comment réinitialiser un formulaire
  • Comment utiliser les polices Google Fonts

.

By: adminPosted on

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.