Maison > Article > interface Web > Comprendre l'asynchrone et le report

Comprendre l'asynchrone et le report

王林original: 2024-08-09 01:58:42767parcourir

Understanding async and defer

C'est l'une des questions d'entretien les plus populaires. Il teste les connaissances des personnes interrogées sur HTML, JS et Performance.

Il s'agit de la question n°1 de la série de questions d'entretien frontend. Si vous souhaitez améliorer votre préparation ou rester à jour en général, pensez à vous inscrire sur FrontendCamp.

La balise script est utilisée pour ajouter du JavaScript à une page HTML. Il peut s'agir d'un script en ligne ou d'un script externe.

<body>
  <!-- Some code before it -->

  <script>
    console.log("This is an inline script.");
  </script>

  <script src="https://example.com/external-script.js" />

  <!-- Some code after it -->
</body>

Lors de l'analyse du HTML, si le navigateur rencontre une balise de script, il arrêtera l'analyse HTML et commencera à exécuter le script JS. S'il est en ligne, l'exécution commencera immédiatement, mais s'il s'agit d'un script externe, il sera téléchargé puis exécuté.

Pendant cette période, lorsque le script JS est téléchargé et exécuté, l'analyse HTML est bloquée. Il ne peut reprendre qu'une fois que le navigateur a fini d'exécuter le script JS.

Voyez-vous ce qui ne va pas ici ? Cela entraînera des problèmes de performances pour l'utilisateur final. Si nous avons beaucoup de scripts ou si un script prend beaucoup de temps à s'exécuter, l'utilisateur ne verra pas le contenu de la page pendant longtemps.

Pour résoudre exactement ce problème, nous avons deux attributs : async et defer.

asynchrone

Si l'attribut async est présent, le script sera téléchargé en parallèle de l'analyse HTML et exécuté dès qu'il sera disponible.

Si plusieurs scripts utilisent l'attribut async, l'ordre d'exécution peut être différent de l'ordre dans lequel ils apparaissent dans le HTML. Le script disponible en premier sera exécuté en premier.

<body>
  <!-- Some code before it -->

  <script async src="https://example.com/external-script.js" />

  <!-- Some code after it -->
</body>

reporter

Si l'attribut defer est présent, le script sera téléchargé en parallèle à l'analyse HTML (tout comme async) mais exécuté une fois l'analyse HTML terminée et avant le lancement de DOMContentLoaded.

Si plusieurs scripts utilisent l'attribut defer, l'ordre d'exécution sera conservé, contrairement à async.

<body>
  <!-- Some code before it -->

  <script defer src="https://example.com/external-script.js" />

  <!-- Some code after it -->
</body>

Résumé

Script de téléchargement asynchrone et différé sans bloquer l'analyse HTML.
Le script asynchrone sera exécuté dès qu'il sera disponible. Cela pourrait potentiellement bloquer l'analyse HTML.
Le script defer ne sera exécuté qu'une fois l'analyse HTML terminée, mais avant le lancement de DOMContentLoaded.
Utilisez async, si l'ordre d'exécution n'a pas d'importance et que le script ne modifie pas le DOM.
Utilisez defer, si l'ordre d'exécution est important ou si le script modifie le DOM.
Notez également que ces attributs ne fonctionnent pas sur les scripts en ligne c'est-à-dire les scripts sans attribut src.
Si async et defer sont ajoutés, async est prioritaire.

Ressources

MDN : L'élément de script
FrontendCamp

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!

JavaScript html if for while Attribute JS dom this

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comprendre les gestionnaires de packages : pnpm vs npm vs YarnArticle suivant：Comprendre les gestionnaires de packages : pnpm vs npm vs Yarn

Articles Liés

Voir plus