Comment JavaScript est chargé dans le navigateur

Comment charger JavaScript dans le navigateur : 1. Analyser la page Web ; 2. Introduire le CSS externe via un lien ; 3. Introduire le js externe via un script ; analyser le document ; 6. Exécuter les scripts de report dans l'ordre ; 7. Convertir en étape événementielle, etc.

L'environnement d'exploitation de cet article : système Windows 7, ordinateur Dell G3, javascript version 1.8.5.

Aujourd'hui, je vais partager avec vous le processus de chargement en JavaScript. Il a une certaine valeur de référence et j'espère que cela sera utile à tout le monde.

Le chargement de JavaScript commence à partir du moment où il démarre jusqu'au moment où il démarre. Le navigateur suit les instructions. Jusqu'à ce que tout soit terminé dans l'ordre, les étapes approximatives peuvent être divisées en création de l'objet document ==> analyse du document terminée ==> chargement et exécution du document, qui seront présentés en détail dans l'article.

Processus de chargement

(1) Analyser la page Web signifie analyser les éléments HTML et leur contenu textuel, ajouter des images et du texte au document, et le document se charge Medium

Analyse de documents

(2) Introduisez le CSS externe via un lien, créez des threads et effectuez un chargement asynchrone.

(3) Introduisez des js externes via un script et ne définissez pas d'asynchrone ou de report. Le navigateur se charge de manière synchrone et bloque etc.

(4) Attendez que js soit chargé, puis définissez async. et reportez-le, le navigateur crée un thread pour le chargement asynchrone, dans lequel async est exécuté immédiatement après le chargement du script (Remarque : le chargement asynchrone devrait interdire l'utilisation de document.write())

(5 ) Lorsque vous rencontrez des attributs avec src tels que img, la structure dom doit d'abord être analysée normalement, puis le navigateur chargera le src de manière asynchrone et continuera à analyser le document. Si la balise est vue, l'arborescence dom sera générée directement sans attendre. pour que l'img charge le scr.

(6) Une fois l'analyse du document terminée, tous les scripts définis avec defer seront exécutés dans l'ordre. (Notez la différence avec async, mais l'utilisation de document.write() est également interdite)

(7) L'objet document déclenche l'événement DOMContentLoaded, qui marque également la transformation de l'exécution du programme à partir du script synchrone. de l'étape d'exécution à l'étape événementielle.

(8) Lorsque tous les scripts asynchrones sont chargés et exécutés, et que img etc. sont chargés (une fois toutes les pages chargées), document.readyState = 'complete' et l'objet window déclenche l'événement de chargement.

(9) Désormais, les entrées utilisateur, les événements réseau, etc. seront traités de manière asynchrone

Remarque

Il est mieux quand nous écrivons des programmes La balise de script est écrite ci-dessous, bien que son écriture ci-dessus puisse non seulement faire fonctionner le div, mais également le traiter immédiatement après l'analyse du dom, ce qui le rend plus efficace. bottom

<div style="width:100px;height:100px;background: pink;">
<script>
var div=document.getElementsByTagName("div")[0]
div.onclick=function(){
this.style.background="hotpink";
}
</script>

Résumé : Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'à travers cet article, tout le monde aura une certaine compréhension du chargement de JavaScript.

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!