Verwenden Sie einige Interviewfragen, um den Ausführungsmechanismus von JavaScript zu untersuchen

Vorherige Wörter

Gemäß der Betriebsumgebung von JavaScript ist es als einzelner Thread gesperrt und Aufgaben müssen zur Ausführung in die Warteschlange gestellt werden. Wenn die Website-Ressourcen groß sind, führt dies dazu, dass der Browser sehr langsam geladen wird, aber tatsächlich ist dies nicht der Fall. Jeder muss sofort an Synchronisation und Asynchronität gedacht haben.

Bei der sogenannten Synchronisierung und Asynchronität handelt es sich ebenfalls um Warteschlangen, die Warteschlangenorte sind jedoch unterschiedlich.

Synchron und asynchron

Synchrone Aufgaben werden im Hauptthread und asynchrone Aufgaben in der Ereigniswarteschlange in die Warteschlange gestellt.

Synchrone und asynchrone Aufgaben gelangen in unterschiedliche Warteschlangen, wie wir oben über das Einreihen in die Warteschlangen an unterschiedlichen Stellen gesagt haben.

Synchrone Aufgaben gelangen in den Hauptthread, asynchrone Aufgaben gelangen in die Ereigniswarteschlange, und nachdem die Hauptthread-Aufgabe ausgeführt wurde, gelangen die Aufgaben, die in der Ereigniswarteschlange auf ihre Ausführung warten, zur Ausführung in den Hauptthread, bis alle Aufgaben in der Ereigniswarteschlange ausgeführt wurden.

Vorspeisen

Konsole.log('a')

setzeTimeout(Funktion(){
    console.log('b')
}, 200)

setzeTimeout(Funktion(){
    console.log('c')
}, 0)

konsole.log('d')

adcb

Von oben nach unten betreten diejenigen, die den Hauptthread betreten sollen, den Hauptthread, und diejenigen, die die Ereigniswarteschlange betreten sollen, betreten die Ereigniswarteschlange.

Dann gibt es console.log('a') und console.log('d') im Hauptthread, und der Timer setTimeout verzögert die Ausführung für einen bestimmten Zeitraum. Wie der Name schon sagt, tritt die asynchrone Aufgabe in die Ereigniswarteschlange ein, wartet auf die Ausführung der Hauptthread-Aufgabe und tritt dann zur Ausführung in den Hauptthread ein.

Ein Timer mit einer Verzögerung von 0 bedeutet nicht, dass er sofort ausgeführt wird, sondern nur, dass er in den Hauptthread eintritt und früher als andere Timer ausgeführt wird.

Einen Teller hinzufügen

für(var i = 0; i < 10; i++) {
    setzeTimeout(Funktion() {
        Konsole.log(i)
    }, 1000)
}

Ergebnis: Zehn 10

Jedes Mal, wenn die For-Schleife auf setTimeout trifft, wird sie in die Ereigniswarteschlange gestellt und wartet auf die Ausführung, bis alle Schleifen abgeschlossen sind. i ist eine globale Variable. Wenn die Schleife endet, ist i = 10. Wenn setTimeout erneut ausgeführt wird, ist der Wert von i bereits 10 und das Ergebnis sind zehn 10er.

Ändern Sie var in let. Der Variablenumfang ist unterschiedlich. Let wirkt in der aktuellen Schleife, sodass das i des Timers, der in die Ereigniswarteschlange eintritt, jedes Mal unterschiedlich ist und das endgültige Druckergebnis 0 1 2...9 ist.

Makroaufgaben Mikroaufgaben

Zusätzlich zu den häufig erwähnten synchronen und asynchronen Aufgaben können sie in Makroaufgaben und Mikroaufgaben unterteilt werden.

Hauptaufgabe des Makros: das gesamte Skript scriptsetTimeoutsetTimeout …

Hauptmikroaufgabe: versprechen.dann …

Ausführungsprozess:

1. Das gesamte Skript wird als Makrotask ausgeführt

2. Wenn Sie auf eine Mikrotask stoßen, verschieben Sie sie in die Mikrotask-Warteschlange und die Makrotask in die Makrotask-Warteschlange

3. Überprüfen Sie nach der Ausführung der Makroaufgabe, ob ausführbare Mikroaufgaben vorhanden sind

4. Ausführbare Mikroaufgaben gefunden und alle Mikroaufgaben abgeschlossen

5. Starten Sie eine neue Makroaufgabe und wiederholen Sie den Vorgang, bis alle Aufgaben abgeschlossen sind

Lasst uns ein Versprechen geben

const p = neues Versprechen(lösen => {
    Konsole.log('a')
    lösen()
    console.log('b')
})

p.then(() => {
    console.log('c')
})

konsole.log('d')

Ergebnis: abdc

1. Das gesamte Skript gelangt in die Makro-Task-Warteschlange und wird ausgeführt

2. Promise wird erstellt und sofort ausgeführt, Druck ab

3. Treffen Sie promise.then und betreten Sie die Microtask-Warteschlange

4. Wenn console.log('d') d ausgibt

5. Der gesamte Code wird als Makrotask ausgeführt, und es gibt einen ausführbaren Mikrotask. Der Mikrotask wird ausgeführt und druckt c.

setzeTimeout(Funktion(){
    console.log('Zeitlimit festlegen')
}, 0)

const p = neues Versprechen(lösen => {
    Konsole.log('a')
    lösen()
    console.log('b')
})

p.then(() => {
    console.log('c')
})

konsole.log('d')

Ergebnis: abdc setTimeout

1.setTimeout tritt in die Makro-Task-Warteschlange ein

2. Promise wird erstellt und sofort ausgeführt, Druck ab

3. Treffen Sie promise.then und betreten Sie die Microtask-Warteschlange

4. Wenn console.log('d') d ausgibt

5. Es gibt ausführbare Mikrotasks, Druck c

6. Nachdem die Mikrotask ausgeführt wurde, beginnt die Ausführung der neuen Makrotask, die Ausführung von setTimeout beginnt und setTimeout wird gedruckt

setzeTimeout(Funktion(){
    console.log('Zeitlimit festlegen')
}, 0)

const p = neues Versprechen(lösen => {
    Konsole.log('a')
    lösen()
    console.log('b')
})

p.then(() => {
    console.log('c')
    setzeTimeout(Funktion(){
        console.log('Zeitüberschreitung in dann festlegen')
    }, 0)
})

konsole.log('d')

Ergebnis: setTimeout in abdc setTimeout dann

1. Wie oben

2. Führen Sie die Mikrotask aus, um c zu drucken, und verschieben Sie sie in die Makrotask-Warteschlange, wenn setTimeout auftritt

3. Die Timer-Verzögerungszeit ist dieselbe, und die Makroaufgaben werden nacheinander ausgeführt, und das setTimeout in setTimeoutthen wird jeweils gedruckt.

Fügen Sie einen Timer hinzu

konsole.log('a');

neues Versprechen(lösen => {
    console.log('b')
    lösen()
}).then(() => {
    console.log('c')
    setzeTimeout(() => {
      konsole.log('d')
    }, 0)
})

setzeTimeout(() => {
    console.log('e')
    neues Versprechen(lösen => {
        console.log('f')
        lösen()
    }).then(() => {
        console.log('g')
    })
}, 100)

setzeTimeout(() => {
    console.log('h')
    neues Versprechen(lösen => {
        lösen()
    }).then(() => {
        konsole.log('i')
    })
    konsole.log('j')
}, 0)

Ergebnis: abchjidefg

1. Drucken Sie eine

2.promise wird sofort ausgeführt und druckt b

3.promise.then schiebt es in die Microtask-Warteschlange

4.setTimeout schiebt in die Makro-Task-Warteschlange

5. Nachdem der gesamte Code ausgeführt wurde, beginnt die Mikrotask mit der Ausführung, druckt c und wird bei Auftreten von setTimeout in die Makrotask-Warteschlange verschoben und wartet auf die Ausführung

6. Wenn keine ausführbare Mikrotask vorhanden ist, starten Sie die Ausführung der Makrotask und stellen Sie den Timer entsprechend der Verzögerungszeit in die Warteschlange zur Ausführung

7. Drucken Sie hj, versprechen Sie. Dann schiebt es in die Microtask-Warteschlange

8. Ausführbare Mikrotask, drucke i, führe weiterhin Makrotask aus, drucke d

9. Führen Sie die Makroaufgabe mit einer Verzögerung von 100 aus, drucken Sie ef, führen Sie die Mikroaufgabe aus und drucken Sie g, und alle Aufgaben sind abgeschlossen

Einfacher Test

console.log('starten')

a().then(() => {
  Konsole.log('a_then')
})

console.log('Ende')

Funktion a() {
  Konsole.log('eine_Funktion')
  return b().then((res) => {
    Konsole.log('res', res)
    console.log('b_then')
    return Promise.resolve('Rückgabewert der Methode a')
  })
}

Funktion b() {
  console.log('b_funktion')
  return Promise.resolve('Rückgabewert')
}

Ergebnis: start a_function b_function end res return value b_then a_then

Denken Sie darüber nach dem Prozess des obigen Beispiels nach, um Ihr Verständnis zu vertiefen

Zusammenfassen

• JavaScript ist ein Single-Threaded-Programm und Aufgaben müssen zur Ausführung in die Warteschlange gestellt werden.
• Synchrone Aufgaben gelangen in die Warteschlange des Hauptthreads und asynchrone Aufgaben gelangen in die Ereigniswarteschlange und warten darauf, zur Ausführung in den Hauptthread geschoben zu werden.
• Ein Zeilentimer mit einer Verzögerung von 0 bedeutet nicht, dass er sofort ausgeführt wird, aber er wird früher als andere Timer ausgeführt.
• Verstehen Sie den JS-Ausführungsmechanismus mit Makrotasks und Mikrotasks besser
• Der gesamte Code wird als Makrotask ausgeführt. Während der Ausführung werden Makrotask und Mikrotask in die entsprechende Warteschlange eingetragen.
• Nachdem die Ausführung des gesamten Codes abgeschlossen ist, prüfen Sie, ob in der Mikrotask-Warteschlange noch Aufgaben auf ihre Ausführung warten. Wenn ja, führen Sie alle Mikrotasks aus, bis die Aufgaben in der Mikrotask-Warteschlange abgeschlossen sind. Wenn nicht, fahren Sie fort
• Führen Sie eine neue Makroaufgabe aus. Wenn während der Ausführung einer Makroaufgabe eine Mikroaufgabe gefunden wird, wird sie zur Ausführung in die Mikroaufgabenwarteschlange verschoben.
• Wiederholen Sie diesen Vorgang, bis alle Aufgaben abgeschlossen sind.

Oben sehen Sie anhand einiger Interviewfragen die Details des JavaScript-Ausführungsmechanismus. Weitere Informationen zum JavaScript-Ausführungsmechanismus finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!