Maison > Article > interface Web > Une brève discussion sur l'ordre d'exécution des compétences JavaScript_javascript

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

WBOYoriginal: 2016-05-16 15:46:291087parcourir

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 3f1c4e4b6b16bbbd69b2ee476dc4f83a (Le marron ci-dessous)

<!DOCTYPE html>
<script>
  console.log("顶部脚本");
</script>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    console.log("头部脚本");
  </script>
</head>
<body>
  <script>
    console.log("页面脚本");
  </script>
</body>
</html>
<script>
  console.log("底部脚本");
</script>

De plus, pour les scripts de fichiers js externes importés via l'attribut src de la balise de script 3f1c4e4b6b16bbbd69b2ee476dc4f83a, 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 并且执行里面的代码
<script src="b.js"></script>
// 然后在按顺序执行下面的代码
<script>
  console.log(1);
</script>

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

Fonction Préparer

f(); // 1
function f() {
  console.log(1);
};

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 3f1c4e4b6b16bbbd69b2ee476dc4f83a (Le marron ci-dessous)

<script>
  // 代码段1
  var a = 1;
</script>
<script>
  // 代码段2
  function f() {
    console.log(1);
  };
</script>

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 3f1c4e4b6b16bbbd69b2ee476dc4f83a, 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)

<script>
  // 代码段1
  console.log(a);
  f();
</script>
<script>
  // 代码段2
  var a = 1;
  function f() {
    console.log(1);
  };
</script>

É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)

<script>
  window.onload = function(){ // 页面初始化事件处理函数
    // 代码段1
    console.log(a);
    f();
  }
</script>
<script>
  // 代码段2
  var a = 1;
  function f() {
    console.log(1);
  };
</script>

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jQuery réalise l'effet de tremblement de menu de la page Web shake_jqueryArticle suivant：jQuery réalise l'effet de tremblement de menu de la page Web shake_jquery

Articles Liés

Voir plus