web-dev-qa-db-fra.com

Pourquoi utiliser defer avec Google Maps Javascript?

Le javascript de Google Maps effectue de lourdes manipulations DOM. Même ainsi, la fine documentation suggère de le charger avec le drapeau defer:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

Pourquoi le drapeau defer serait-il suggéré pour un script qui effectue des manipulations DOM? Je demande à savoir à la fois sur le drapeau defer et à connaître l'API Google Maps car je semble avoir une mauvaise compréhension de ce que l'on d'entre eux fait.

javascriptgoogle-mapsdeferred
13
dotancohen

Normalement, une balise script indique au navigateur d'arrêter l'analyse syntaxique du HTML, de récupérer le script, de l'exécuter, puis de continuer l'analyse syntaxique du HTML. En effet, le code de script peut utiliser document.write pour sortir dans le flux de jetons HTML.

async et defer sont tous deux des mécanismes pour dire au navigateur qu'il est correct d'aller de l'avant et de continuer à analyser le code HTML en parallèle avec le téléchargement du fichier de script, et d'exécuter le fichier de script plus tard, pas tout de suite.

Ils sont légèrement différents, cependant; ce diagramme de la section script de la version WHAT-WG de la spécification HTML est utile pour envisager les différences:

enter image description here

Tous les détails dans la spécification liée ci-dessus, mais en bref, pour les scripts "classiques" (le genre auquel vous êtes habitué; mais les scripts de module arrivent bientôt!):

  • async et defer permettent à l'analyse du HTML de continuer sans attendre le téléchargement du script.
  • defer fera attendre le navigateur pour exécuter le script jusqu'à ce que l'analyse soit terminée.
  • async ne fera qu'attendre le navigateur jusqu'à la fin du téléchargement du script, ce qui signifie qu'il peut exécuter le script avant la fin de l'analyse ou après, selon la fin du téléchargement (et rappelez-vous qu'il peut provenir du cache).
  • Si async est présent et pris en charge par le navigateur, il a priorité sur defer.
  • async les scripts peuvent être exécutés dans n'importe quel ordre, quel que soit l'ordre dans lequel ils apparaissent dans le HTML.
  • defer les scripts seront exécutés dans l'ordre où ils apparaissent dans le HTML, une fois l'analyse terminée.
  • async et defer sont bien pris en charge dans les navigateurs même semi-modernes, mais ne sont pas correctement pris en charge dans IE9 et versions antérieures, voir ici et ici .

Pourquoi le drapeau defer serait-il suggéré pour un script qui effectue des manipulations DOM?

Deux raisons:

  1. Il permet à l'analyse de continuer pendant que le script est téléchargé, et
  2. Cela signifie que le script n'est pas exécuté tant que l'analyse n'est pas terminée.

Si vous n'avez pas utilisé defer et que vous avez placé vos balises script de manière non optimale, l'utilisation de defer aide le script API à se comporter correctement en laissant le navigateur terminer la construction du DOM avant le le script essaie de le manipuler.

Beaucoup de gens mettent encore des balises script dans la section head du document, même si c'est généralement le pire endroit pour les mettre sauf si vous utilisez defer (ou async). Dans la plupart des cas, le meilleur endroit (sauf si vous avez une raison de faire autre chose) est à la toute fin , juste avant la fermeture </body> tag, pour que A) Votre site s'affiche rapidement, sans attendre les scripts; et B) Le DOM est entièrement construit avant d'essayer de le manipuler. La recommandation de defer peut leur éviter de prendre en charge les problèmes de personnes qui mettent leurs balises script trop tôt dans le code HTML.

25
T.J. Crowder

Les exemples de google maps utilisent à la fois les drapeaux async et defer.

  • L'indicateur async permet au script de se charger parallèlement à l'analyse DOM et de s'exécuter dès que l'API est prête.
  • L'indicateur defer permet au script de se charger en parallèle à l'analyse DOM, mais garantit que le script ne s'exécutera pas tant que l'analyse DOM n'est pas terminée.

async est pris en charge par les navigateurs HTML5 modernes, tandis que defer est universel. Lorsque les balises sont utilisées ensemble, defer n'est qu'un remplacement pour les navigateurs plus anciens et sera ignoré si async est pris en charge .

Dans ces exemples simples, async ou defer fonctionnera, mais aucun n'est nécessaire. Dans ce cas, c'est uniquement pour les performances.

Réfs:
Accélérez Google Maps (et tout le reste) avec async et différé
async vs attributs de report - Grandir avec le Web

2
Yarin