Chronologie JS du flux d'exécution Dom; différer et asynchroniser

Chronologie JS du flux d'exécution Dom

1. Créez un objet Document et commencez à analyser la page Web. Analyser les éléments HTML et le texte. Cette étape document.readyState = 'chargement'

2. Rencontrez le lien css externe, créez un thread à charger et continuez à analyser le document.

3. Script de rencontre JS externe, n'a pas défini asynchrone, différé, chargement du navigateur, blocage, attente de chargement, puis analyse du document

4. Rencontrez le script JS externe et définissez asynchrone, différez, le navigateur crée un thread à charger, continuez à analyser le document

   • async est exécuté après le chargement

   • Une fois le html différé analysé, la séquence d'introduction est exécutée séquentiellement.

   • Interdire l'utilisation de document.write Ps dans le script: il effacera le flux de documents

5. Lorsque vous rencontrez img, etc., les détails normaux de la structure dom sont d'abord, puis le navigateur charge le src de manière asynchrone et continue d'analyser le document

6. Lorsque le document est analysé, document.readyState = 'interactif'

7. Une fois le document analysé, tous les scripts avec différé seront exécutés dans l'ordre d'introduction;

8. L'objet document déclenche l'événement DOMContentLoaded, qui marque également l'exécution du programme de l'étape d'exécution du script de synchronisation à l'étape pilotée par les événements. Autrement dit, les événements tels que les clics sont actuellement acceptés.

9. Lorsque tous les scripts asynchrones sont chargés et exécutés, et que img, etc. sont chargés, document.readyState = complete déclenche l'événement de chargement.

10. Dès lors, les entrées utilisateur, les événements réseau, etc. sont traités dans une réponse asynchrone.