Une brève discussion sur l'ordre d'exécution des compétences JavaScript

Bien que les navigateurs modernes puissent télécharger JavaScript en parallèle (certains navigateurs), compte tenu des dépendances de JavaScript, leur exécution s'effectue toujours dans l'ordre d'introduction.

Cet article enregistre certaines des choses que j'ai apprises en lisant des livres tout en apprenant JavaScript, pour approfondir ma mémoire, les organiser et les enregistrer pour une révision ultérieure.

Ordre d'exécution en document html

L'image de la comparaison de l'ordre d'exécution du code js, les utilisateurs peuvent ressentir intuitivement cet ordre d'exécution. Cependant, l'ordre d'exécution du code js est plus compliqué. Parfois, nous écrivons du code js en html, et le processus d'analyse du document html dans le navigateur est le suivant : le navigateur analyse progressivement la structure de la page et les informations de haut en bas en fonction du flux du document. En tant que script intégré, le code js est également considéré comme un composant du document HTML. Par conséquent, l'ordre d'exécution du code js lors du chargement est également déterminé en fonction de l'ordre dans lequel la balise de script (Le marron ci-dessous)

console.log("顶部脚本"); Document console.log("头部脚本"); console.log("页面脚本"); console.log("底部脚本"); Copier après la connexion De plus, pour les scripts de fichiers js externes importés via l'attribut src de la balise de script , ils seront également exécutés dans l'ordre dans lequel leurs instructions apparaissent, et le processus d'exécution fait partie du chargement du document, pas parce que il s'agit d'un document js externe et d'une exécution reportée.

// 先加载 b.js 并且执行里面的代码 // 然后在按顺序执行下面的代码 console.log(1); Copier après la connexion Pré-compilé

Lorsque le moteur js analyse, il précompile toutes les variables et fonctions déclarées.

Promotion variable

console.log(a); // undefined var a = 1; console.log(a); // 1 Copier après la connexion Fonction Préparer

f(); // 1 function f() { console.log(1); }; Copier après la connexion Détails : Levage de la déclaration de variable JavaScript

Exécuter le code en morceaux

JS exécute le code en blocs. Les blocs de code sont des segments de code séparés par des balises (Le marron ci-dessous)

// 代码段1 var a = 1; // 代码段2 function f() { console.log(1); }; Copier après la connexion Parce que js est exécuté dans des blocs de code. Lorsque le navigateur analyse le flux de document HTML, s'il rencontre une balise , js attendra que le bloc de code soit chargé avant de précompiler le code puis de l'exécuter. Après l'exécution, le navigateur continuera à analyser le flux de documents HTML de Ximen et js sera prêt à traiter le prochain bloc de code.

Il y a un petit écueil. Puisque js est exécuté en blocs, l'appel de variables ou de fonctions déclarées dans les blocs suivants dans un bloc js entraînera une erreur de syntaxe. Mais différents blocs appartiennent à une portée globale, c'est-à-dire que les variables et fonctions entre blocs peuvent être partagées. (Le marron ci-dessous)

// 代码段1 console.log(a); f(); // 代码段2 var a = 1; function f() { console.log(1); }; Copier après la connexion Étant donné que js traite le code par blocs et suit l'ordre d'analyse du flux de documents HTML, vous verrez des erreurs de syntaxe dans l'exemple ci-dessus. Cependant, cette erreur ne se produira pas lors d'un nouvel accès après le chargement du flux de documents. (Le marron ci-dessous)

window.onload = function(){ // 页面初始化事件处理函数 // 代码段1 console.log(a); f(); } // 代码段2 var a = 1; function f() { console.log(1); }; Copier après la connexion Pour des raisons de sécurité, l'exécution de code js n'est généralement autorisée qu'après l'initialisation de la page, afin d'éviter l'impact d'une certaine vitesse du réseau sur l'exécution de js. Dans le même temps, cela évite également les restrictions du flux de documents HTML sur l'exécution de js.

Pour résumer, les étapes d'exécution de JavaScript sont :

1. Lisez d'abord le premier bloc de code

2. Effectuez une analyse syntaxique sur le bloc de code. S'il y a une erreur de syntaxe, passez directement à l'étape 5 .

3. "Précompiler" les fonctions définies par les variables var et la fonction (les fonctions d'affectation ne seront pas précompilées)

4. Exécutez le bloc de code et signalez une erreur s'il y a une erreur

5. S'il y a le bloc de code suivant, lisez le bloc de code suivant et répétez l'étape 2

6. Fin

Une brève discussion sur l'ordre d'exécution des compétences JavaScript_javascript