Comprendre l'asynchrone et le report-js tutoriel-php.cn

Comprendre l'asynchrone et le report

王林

Libérer： 2024-08-09 01:58:42

original

804 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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.