Eine kurze Analyse des JS-Ausführungsmechanismus

Dieser Artikel teilt Ihnen hauptsächlich eine Methode zur kurzen Analyse des JS-Ausführungsmechanismus mit. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird. Kommen Sie vorbei und werfen Sie einen Blick mit dem Herausgeber

Bitte beachten Sie zunächst 2 Punkte:

(1) JS ist eine Single-Threaded-Sprache

(2) Die Ereignisschleife von JS ist der Ausführungsmechanismus von JS. Ein tiefes Verständnis der Ausführung von JS entspricht einem tiefen Verständnis der Ereignisschleife in JS

1. Warum ist JS Single-Threaded? Wie wird Single-Threading implementiert?

Die Entstehung der Technologie hängt eng mit Anwendungsszenarien in der realen Welt zusammen.

In ähnlicher Weise werden wir diese drei Fragen anhand realer Szenarien beantworten

(1) Warum ist JS Single-Threaded?

JS wurde ursprünglich für die Verwendung in Browsern entwickelt. Stellen Sie sich also vor, JS im Browser wäre multithreaded.

Wenn man es so betrachtet, sollte es leicht zu verstehen sein, warum JS für Single-Threading konzipiert ist.

(2) Warum braucht JS asynchron?

Es gibt also eine asynchrone Ausführung in JS.

(3) Wie erreicht Single-Threaded JS eine asynchrone Implementierung?

Da JS Single-Threaded ist, kann es nur in ausgeführt werden Ein Thread Wie implementiert man die asynchrone Ausführung?

ist durch die Ereignisschleife. Wenn Sie den Ereignisschleifenmechanismus verstehen, werden Sie den Ausführungsmechanismus von JS verstehen

2. Ereignisschleife (1) in JS

Beispiel 1, beobachten Sie die Ausführungssequenz

 console.log(1)
    
    setTimeout(function(){
        console.log(2)
    },0)
 
    console.log(3)

Das laufende Ergebnis ist: 1 3 2

In Mit anderen Worten, die Funktion in setTimeout wird nicht sofort ausgeführt, sondern um einen bestimmten Zeitraum verzögert und ausgeführt, nachdem bestimmte Bedingungen erfüllt sind. Diese Art von Code wird als asynchroner Code bezeichnet.

Hier kennen wir also zunächst eine Klassifizierungsmethode in JS, die darin besteht, Aufgaben in synchrone Aufgaben und asynchrone Aufgaben zu unterteilen

Bildbeschreibung

Gemäß dieser Klassifizierungsmethode: Der Ausführungsmechanismus von JS ist

• Bestimmen Sie zunächst, ob JS synchron oder asynchron ist. Wenn es synchron ist, wird es in den Hauptprozess eingegeben, wenn es asynchron ist, wird es in die Ereignistabelle eingegeben

• Die asynchrone Aufgabe registriert die Funktion in der Ereignistabelle. Wenn die Triggerbedingung erfüllt ist, wird sie in die Ereigniswarteschlange verschoben.

• Die Die synchrone Aufgabe gelangt in den Hauptthread und wird ausgeführt, bis der Hauptthread inaktiv ist. Überprüfen Sie, ob ausführbare asynchrone Aufgaben vorhanden sind. Schieben Sie sie in den Hauptprozess

Die oben genannten drei Schritte werden in einer Schleife ausgeführt. Dies ist die Ereignisschleife

Können Sie für das obige Beispiel die Ausführungsreihenfolge beschreiben?

3.JS中的event loop(2)

所以,上面关于event loop就是我对JS执行机制的理解,直到我遇到了下面这段代码

例2:

setTimeout(function(){
     console.log('定时器开始啦')
 });
 
 new Promise(function(resolve){
     console.log('马上执行for循环啦');
     for(var i = 0; i

尝试按照,上文我们刚学到的JS执行机制去分析

Das Ergebnis ist also [for-Schleife sofort ausführen – die Codeausführung endet – der Timer startet – die then-Funktion wird ausgeführt]

Nachdem ich es selbst ausgeführt habe, ist das Ergebnis nicht so, aber [sofort ausführen] Die for-Schleife – die Codeausführung endet – die then-Funktion wird ausgeführt – der Timer startet]

Ist es also die Reihenfolge der Ausführung asynchroner Aufgaben, nicht die Reihenfolge von vorher und nachher, sondern Andere Vorschriften? Tatsächlich ist die Synchronisierungsteilungsmethode laut asynchroner Methode nicht genau.

Die genaue Divisionsmethode lautet:

• Makroaufgabe (Makroaufgabe): einschließlich des gesamten Codeskripts setTimeout, setInterval

• Mikroaufgabe (Mikrotask): Promise, Process.nextTick

Gemäß dieser Klassifizierung: Der Ausführungsmechanismus von JS ist

• Führen Sie eine Makroaufgabe aus. Wenn während des Vorgangs eine Mikroaufgabe auftritt, legen Sie sie in die [Ereigniswarteschlange] der Mikroaufgabe

• Aktuelles Makro Nachdem die Aufgabenausführung abgeschlossen ist, wird die [Ereigniswarteschlange] der Mikrotask angezeigt und alle darin enthaltenen Mikrotasks werden nacheinander ausgeführt.

Wiederholen Sie die beiden oben genannten Schritte in Kombination mit dem Ereignis Schleife (1) Ereignisschleife (2) Dies ist ein genauerer JS-Ausführungsmechanismus.

Versuchen Sie, Beispiel 2 anhand des Ausführungsmechanismus zu analysieren, den Sie gerade gelernt haben:

所以最后的执行顺序是【马上执行for循环啦 — 代码执行结束 — 执行then函数啦 — 定时器开始啦】

4. 谈谈setTimeout

这段setTimeout代码什么意思? 我们一般说: 3秒后,会执行setTimeout里的那个函数

setTimeout(function(){
    console.log('执行了')
 },3000)

但是这种说并不严谨,准确的解释是: 3秒后,setTimeout里的函数被会推入event queue,而event queue(事件队列)里的任务,只有在主线程空闲时才会执行。

所以只有满足 (1)3秒后 (2)主线程空闲,同时满足时,才会3秒后执行该函数

如果主线程执行内容很多,执行时间超过3秒,比如执行了10秒,那么这个函数只能10秒后执行了

Das obige ist der detaillierte Inhalt vonEine kurze Analyse des JS-Ausführungsmechanismus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!