Chargement des ressources et événements de page

domLoading

Le moment où le navigateur commence à analyser l'arbre dom

domInteractive

Indique que le navigateur a analysé l'arborescence dom.

domContentLoaded

Le JS synchronisé a été exécuté.

Besoin d'expliquer un peu plus ici:

Étant donné que JS synchrone bloquera l'analyse de Dom, dans le cas de JS synchrone, la différence entre domInteractive et domContentLoaded n'est pas beaucoup.
Si l'attribut defer est ajouté à JS, la différence de temps entre domInteractive et domContentLoaded dépend du temps de téléchargement et d'exécution de JS. defer JS indique au navigateur que ce JS sera exécuté après domInteractive. Voir http://www.w3.org/TR/html5/syntax.html#the-end . Une fois le report JS exécuté, domContentLoaded sera déclenché.
Si l'attribut JS est asynchrone, alors domContentLoaded et domInteractive sont presque les mêmes, car l'analyse js ne bloquera pas le dom ou l'événement domContentLoad.

en charge

Les éléments de la page ont été chargés. Y compris tous les CSS, JS, Image et ainsi de suite.

Quelques petites expériences

Les exemples suivants utilisent tous le blocage comme expérience et vous pouvez accéder à la version en ligne .

Question 1: JS synchronisé écrit-il dans le script JS via le délai document.write DomContentLoaded?

Conclusion: oui. Comme vous pouvez le voir dans l'exemple, DomContentLoaded doit attendre que le fichier JS écrit de manière synchrone soit écrit avant d'être déclenché.

Code:

<html>
<head>
</head>
<body>
  <script>
  document.write('<script src="t/wait-3s.js"' + '></' + 'script>');
  </script>
  {{flush 1000}}
  <h1>Hello World</h1>
</body>
</html>

Chronologie:

Question 2: l'insertion dynamique JS synchrone du report JS retardera-t-elle DomContentLoaded?

Conclusion: comContentLoaded ne sera pas retardé, mais le temps de chargement sera bloqué. Il faut ajouter que même si le JS sans report est inséré dynamiquement, DomContentLoaded ne sera pas retardé.

Pour le code suivant:

<html>
<head>
</head>
<body>
  <script>
   var script = document.createElement('script');
   script.src= "/t/wait-2s.js";
   script.defer = true;
   document.head.appendChild(script);
  </script>
  {{flush 1000}}
  <h1>Hello World</h1>
</body>
</html>

La chronologie est la suivante: (le bleu est le document principal, la ligne jaune est le fichier JS)

Question 3: Si le script (sync / defer / async) est inséré dynamiquement au moment de domContentLoaded, l'événement onload sera-t-il bloqué?

Conclusion: (Sync / defer / async) bloquera l'événement onload.

Code (prenez l'exemple de report):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script>
   document.addEventListener('DOMContentLoaded', function(){
     var script = document.createElement('script');
     script.src= "/t/wait-2s.js";
     script.defer = true;
     document.head.appendChild(script);
   });
  </script>
  {{flush 1000}}
  <h1>Hello World</h1>
</body>
</html>

Chronologie:

Les deux petites expériences ci-dessus doivent être prouvées dans la spécification: Faites tourner la boucle d'événements jusqu'à ce que set of scripts that will execute as soon as possibleet the list of scripts that will execute in order as soon as possiblesoient vides.

Question 3: Si le CSS / image / iframe est inséré dynamiquement pendant domContentLoaded, l'événement onload sera-t-il bloqué?

Conclusion: bloquera. Les images / CSS insérées dynamiquement bloqueront l'événement onload, pas iframe.

Code (prenez l'image comme exemple):

<html>
<head>
</head>
<body>


<script>
   document.addEventListener('DOMContentLoaded', function(){
     
     var img = document.createElement('img');
     img.src= "/t/wait-2s.png";
     document.body.appendChild(img);
     

     /*
     var link = document.createElement('link');
     link.rel = "stylesheet";
     link.href = "t/wait-3s-red.css";
     document.body.appendChild(link);
     */

     /*
     var iframe = document.createElement('iframe');
     iframe.src = "t/wait-3s.html";
     document.body.appendChild(iframe);
     */

     
   });
  </script>



  {{flush 1000}}


<h1>Hello World</h1>


</body>
</html>

Le résultat:

[Plus à ajouter ...]

domLoading

domInteractive

domContentLoaded

en charge

Quelques petites expériences

Je suppose que tu aimes