suchen

Heim >Web-Frontend >js-Tutorial >Eine kurze Diskussion über die Ausführungsreihenfolge von JavaScript_Javascript-Fähigkeiten

Eine kurze Diskussion über die Ausführungsreihenfolge von JavaScript_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:46:291143Durchsuche

Obwohl moderne Browser JavaScript parallel herunterladen können (einige Browser), erfolgt die Ausführung angesichts der Abhängigkeiten von JavaScript immer noch in der Reihenfolge der Einführung.

In diesem Artikel werden einige Dinge aufgezeichnet, die ich beim Lesen von Büchern und beim Erlernen von JavaScript gelernt habe, um mein Gedächtnis zu vertiefen und sie für eine spätere Überprüfung zu ordnen und aufzuzeichnen.

Ausführungsreihenfolge im HTML-Dokument

Auf dem Bild des Vergleichs der Ausführungsreihenfolge von js-Code können Benutzer diese Ausführungsreihenfolge intuitiv spüren. Die Ausführungsreihenfolge von js-Code ist jedoch komplizierter. Manchmal schreiben wir JS-Code in HTML, und der Prozess des Parsens des HTML-Dokuments im Browser ist wie folgt: Der Browser analysiert die Seitenstruktur und die Informationen schrittweise von oben nach unten entsprechend dem Dokumentfluss. Als eingebettetes Skript gilt JS-Code auch als Bestandteil des HTML-Dokuments. Daher wird die Ausführungsreihenfolge des JS-Codes beim Laden auch anhand der Reihenfolge bestimmt, in der das Skript-Tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a erscheint. (Die Kastanie unten) 

<!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>

Auch für externe JS-Dateiskripte, die über das src-Attribut des Skript-Tags 3f1c4e4b6b16bbbd69b2ee476dc4f83a importiert werden, wird es in der Reihenfolge ausgeführt, in der seine Anweisungen erscheinen, und der Ausführungsprozess ist Teil des Dokumentladens, nicht weil Es handelt sich um ein externes JS-Dokument mit verzögerter Ausführung. 

// 先加载 b.js 并且执行里面的代码
<script src="b.js"></script>
// 然后在按顺序执行下面的代码
<script>
  console.log(1);
</script>

Vorkompiliert

Wenn die js-Engine analysiert, kompiliert sie alle deklarierten Variablen und Funktionen vor.

Variable Promotion

console.log(a); // undefined
var a = 1;
console.log(a); // 1

Vorbereitungsfunktion

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

Details: Anheben der JavaScript-Variablendeklaration

Code in Blöcken ausführen

JS führt Code in Blöcken aus. Die sogenannten Codeblöcke sind durch 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags getrennt. (Die Kastanie unten) 

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

Weil js in Codeblöcken ausgeführt wird. Wenn der Browser den HTML-Dokumentstrom analysiert und auf ein 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag stößt, wartet js, bis der Codeblock geladen ist, bevor er den Code vorkompiliert und dann ausführt. Nach der Ausführung analysiert der Browser weiterhin den HTML-Dokumentfluss von Ximen und js ist bereit, den nächsten Codeblock zu verarbeiten.

Da JS in Blöcken ausgeführt wird, führt der Aufruf von Variablen oder Funktionen, die in nachfolgenden Blöcken in einem JS-Block deklariert werden, zu einem Syntaxfehler. Aber verschiedene Blöcke gehören zu einem globalen Bereich, das heißt, Variablen und Funktionen zwischen Blöcken können gemeinsam genutzt werden. (Die Kastanie unten) 

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

Da js Code in Blöcken verarbeitet und der Analysereihenfolge des HTML-Dokumentflusses folgt, werden Sie im obigen Beispiel Syntaxfehler sehen. Dieser Fehler tritt jedoch nicht auf, wenn nach dem Laden des Dokumentstroms erneut darauf zugegriffen wird. (Die Kastanie unten) 

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

Aus Sicherheitsgründen ist die Ausführung von JS-Code im Allgemeinen erst nach der Initialisierung der Seite zulässig, um die Auswirkungen einer gewissen Netzwerkgeschwindigkeit auf die JS-Ausführung zu vermeiden. Gleichzeitig werden die Einschränkungen des HTML-Dokumentflusses bei der Ausführung von js vermieden.

Zusammenfassend sind die Schritte der JavaScript-Ausführung:

1. Lesen Sie zuerst den ersten Codeblock

2. Führen Sie eine Syntaxanalyse für den Codeblock durch. Fahren Sie direkt mit Schritt 5 fort

3. „Vorkompilieren“ Sie die durch Variablen und Funktionen definierten Funktionen (Zuweisungsfunktionen werden nicht vorkompiliert)

4. Führen Sie den Codeblock aus und melden Sie einen Fehler, wenn ein Fehler auftritt

5. Wenn es den nächsten Codeblock gibt, lesen Sie den nächsten Codeblock und wiederholen Sie Schritt 2

6. Ende

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery realisiert den Menü-Shaking-Effekt von Webseiten-Shaking_jqueryNächster Artikel：jQuery realisiert den Menü-Shaking-Effekt von Webseiten-Shaking_jquery

In Verbindung stehende Artikel

Mehr sehen