Technische Antwort: JavaScript-Ausführungsmechanismus

Plug-in-Prozess von Drittanbietern

Verantwortlich für die Verwaltung von Plug-ins von Drittanbietern

GPU-Prozess

Verantwortlich für 3D-Rendering und Hardwarebeschleunigung (höchstens eine)

Rendering-Prozess

Verantwortlich für das Parsen, Ausführen und Rendern von Seitendokumenten

Welche Threads im Rendering-Prozess enthalten sind

GUI-Rendering-Thread

Hauptverantwortlich für Parsen von HTML, CSS, Erstellen eines DOM-Baums, Layout, Zeichnen usw.

Dieser Thread ist mit der JavaScript-Engine verbunden. Threads schließen sich gegenseitig aus. Wenn der Thread der JavaScript-Engine ausgeführt wird, wird der GUI-Rendering-Thread angehalten Ist inaktiv, führt der Hauptthread das GUI-Rendering aus

Der JavaScript-Engine-Thread

ist hauptsächlich für die Verarbeitung von JavaScript-Skripten und die Ausführung von Code verantwortlich (z. B. V8-Engine)

Der Browser kann nur einen JS-Engine-Thread haben, der den JS ausführt Programm gleichzeitig, das heißt, JS ist Single-Threaded

Der JS-Engine-Thread und der GUI-Rendering-Thread schließen sich gegenseitig aus, sodass die JS-Engine das Seitenrendering blockiert

Zeitgesteuerter Trigger-Thread

Verantwortlich für die Ausführung des Timers Funktionen (setTimeout, setInterval)

Browser-Timing-Zähler werden von der JS-Engine nicht gezählt (da JS Single-Threaded ist, wirkt sich eine Blockierung auf die Genauigkeit des Zählers aus) ) )

Zeit- und Trigger-Timing durch eine separate Thread (nachdem das Timing abgeschlossen ist, fügen Sie es der Ereigniswarteschlange des ereignisauslösenden Threads hinzu und warten Sie auf die Ausführung, nachdem die JS-Engine inaktiv ist. Dieser Thread ist der Timing-Trigger-Thread, auch Timer-Thread genannt.)W3C Es ist in festgelegt Der HTML-Standard besagt, dass das Zeitintervall unter 4 ms in setTimeout als 4 ms gezählt wird Das entsprechende Ereignis wird am Ende der zu verarbeitenden Warteschlange hinzugefügt und wartet auf die Verarbeitung durch die JS-Engine.

Synchronisierte Aufgaben

Asynchrone Aufgaben

Synchronisierte und asynchrone Aufgaben treten jeweils an unterschiedlichen Ausführungsplätzen auf, indem sie synchron in den Hauptthread und asynchron in die Ereignistabelle eintreten und registrieren Sie die Funktion.

Nachdem die Aufgabe im Hauptthread ausgeführt wurde, wird sie in die Ereigniswarteschlange verschoben, um die entsprechende Funktion zu lesen und zur Ausführung in den Hauptthread einzutreten.

• Makroaufgaben und Mikroaufgaben

• Neben synchronen Aufgaben und asynchronen Aufgaben im weitesten Sinne verfügt JavaScript auch über detailliertere Aufgabendefinitionen:

• Makroaufgabe: einschließlich globalem Code, setTimeout, setInterval

• Mikroaufgabe: new Promise().then(callback) process.nextTick()

• Verschiedene Arten von Aufgaben werden in unterschiedliche Aufgabenwarteschlangen eingegeben:

Die Reihenfolge der Ereignisschleife bestimmt die Ausführungsreihenfolge des JS-Codes. Nach Eingabe des Gesamtcodes (Makrotask) startet der erste Zyklus. Führen Sie dann alle Mikrotasks aus. Beginnen Sie dann erneut mit der Makroaufgabe, suchen Sie eine der auszuführenden Aufgabenwarteschlangen und führen Sie dann alle Mikroaufgaben aus. Ausführungsstapel und Aufgabenwarteschlange

• Ausführungsstapel

  JavaScript-Code wird in einem Ausführungskontext ausgeführt. Es gibt drei Ausführungskontexte in JavaScript:

  • Globaler Ausführungskontext

  • Funktionsausführungskontext wird erstellt

  • Eval-Ausführungskontext, der von der Eval-Funktion generierte Kontext (weniger verwendet)

  Im Allgemeinen hat unser JS-Code mehr als einen Kontext. Wie ist also die Ausführungsreihenfolge dieser Kontexte?

  Wir alle wissen, dass der Stapel eine Last-In-First-Out-Datenstruktur ist. Der Ausführungsstapel in unserem JavaScript ist eine solche Stapelstruktur. Wenn die JS-Engine den Code ausführt, wird ein globaler Kontext generiert und in den Stapel verschoben Immer wenn ein Funktionsaufruf auftritt, wird der Funktionsausführungskontext generiert und auf den Ausführungsstapel verschoben. Die Engine beginnt mit der Ausführung der Funktion oben im Stapel und der Ausführungskontext wird nach der Ausführung angezeigt.

  function add(){
    console.log(1)
    foo()
    console.log(3)
  }
  function foo(){
    console.log(2)
  }
  add()

  Nach dem Login kopieren

  Werfen wir einen Blick auf den Ausführungsstapel des obigen Codes:

  

  Aufgabenwarteschlange

  Wir haben bereits erwähnt, dass alle Aufgaben in JavaScript in synchrone Aufgaben und asynchrone Aufgaben, synchrone Aufgaben usw. unterteilt sind Wie der Name schon sagt, handelt es sich um eine Aufgabe, die sofort ausgeführt wird. Sie gelangt normalerweise direkt zur Ausführung in den Hauptthread. Unsere asynchrone Aufgabe tritt in die Aufgabenwarteschlange ein und wartet auf die Ausführung der Aufgabe im Hauptthread, bevor sie ausgeführt wird.

  Die Aufgabenwarteschlange ist eine Ereigniswarteschlange, die angibt, dass verwandte asynchrone Aufgaben in den Ausführungsstapel gelangen können. Der Hauptthread liest die Aufgabenwarteschlange, um die darin enthaltenen Ereignisse zu lesen.

  Queue ist eine First-In-First-Out-Datenstruktur.

  Wir haben oben erwähnt, dass asynchrone Aufgaben in Makroaufgaben und Mikroaufgaben unterteilt werden können, sodass Aufgabenwarteschlangen auch in Makroaufgabenwarteschlangen und Mikroaufgabenwarteschlangen unterteilt werden können

  • Makroaufgabenwarteschlange: Für relativ große Arbeiten gehören zu den häufigsten Aufgaben setTimeout, setInterval, Benutzerinteraktion, UI-Rendering usw.;

  • Microtask-Warteschlange: Führen Sie kleinere Aufgaben aus. Zu den häufigsten gehören Promise, Process.nextTick; Zur Ausführung werden sie in den Hauptthread gestellt, und asynchrone Aufgaben (Klickereignisse, Timer, Ajax usw.) werden im Hintergrund ausgeführt und warten auf den Abschluss von E/A-Ereignissen oder die Auslösung von Verhaltensereignissen.

  Das System führt asynchrone Aufgaben im Hintergrund aus. Wenn ein asynchrones Aufgabenereignis (oder Verhaltensereignis) ausgelöst wird, wird die Aufgabe zur Aufgabenwarteschlange hinzugefügt und jede Aufgabe wird von einer Rückruffunktion verarbeitet.

  Asynchrone Aufgaben werden hier in Makroaufgaben und Mikroaufgaben unterteilt, die in die Makroaufgabenwarteschlange eingegeben werden, und Mikroaufgaben, die in die Mikroaufgabenwarteschlange eingegeben werden. Die Aufgaben in der Ausführungsaufgabenwarteschlange werden speziell im Ausführungsstapel ausgeführt. Wenn alle Aufgaben im Hauptthread ausgeführt werden, werden sie alle in der Mikroaufgabenwarteschlange ausgeführt Lesen Sie die Makroaufgaben. Der obige Vorgang wird kontinuierlich wiederholt, was wir oft als Ereignisschleife (Event-Loop) bezeichnen.

  Beispiel zur Überprüfung einer Frage
  Sehen wir uns eine zu überprüfende Frage an

  (async ()=>{
      console.log(1) 
    
      setTimeout(() => {
      console.log('setTimeout1')
      }, 0);
    
      function foo (){
          return new Promise((res,rej) => {
              console.log(2)
              res(3)
          })
      }
    
      new Promise((resolve,reject)=>{
      console.log(4)
      resolve() 
      console.log(5)
      }).then(()=> {
      console.log('6')
      })
    
      const res = await foo();
      console.log(res);
      console.log('7')
    
      setTimeout(_ => console.log('setTimeout2'))
  })()

  Nach dem Login kopieren