Detaillierte Einführung in den JS-Thread-Mechanismus und den Ereignismechanismus (Bild und Text)

 document.getElementById('btn').onclick = function () {
      var start = Date.now()
      console.log('启动定时器前...')
      setTimeout(function () {
        console.log('定时器执行了', Date.now() - start)
      }, 200)
      console.log('启动定时器后...')
      // 做一个长时间的工作
      for (var i = 0; i <p style="text-align: center;"><span class="img-wrap"><img src="https://img.php.cn//upload/image/139/417/140/1539669885863938.png" title="1539669885863938.png" alt="Detaillierte Einführung in den JS-Thread-Mechanismus und den Ereignismechanismus (Bild und Text)"></span><br>Tatsächlich wird der Timer erst ausgeführt, wenn 625 ms vergangen sind. Der Timer garantiert keine Echtzeitausführung. Er verzögert sich normalerweise etwas oder kann lange dauern (wie im obigen Beispiel). </p><p><strong>2 In separaten Threads ausgeführt? </strong></p><p><strong>Die Timer-Callback-Funktion wird im Hauptthread ausgeführt</strong> Die spezifische Implementierungsmethode wird unten vorgestellt. </p><p><strong>4. Browser-Ereignisschleifenmodell (Polling) </strong></p><p><strong>Warum JavaScript Single-Threaded ist</strong></p><p><strong> Ein Hauptmerkmal der JavaScript-Sprache ist Single-Threading, was bedeutet, dass sie jeweils nur eine Sache ausführen kann</strong>. Warum kann JavaScript also nicht mehrere Threads haben? Dadurch kann die Effizienz verbessert werden. </p><p>Der einzelne Thread von JavaScript hängt mit seinem Zweck zusammen. Als Browser-Skriptsprache besteht der Hauptzweck von JavaScript darin, mit Benutzern zu interagieren und das DOM zu manipulieren. Dies legt fest, dass es nur Single-Threaded sein kann, da es sonst zu sehr komplexen Synchronisationsproblemen kommt. Angenommen, JavaScript verfügt über zwei Threads gleichzeitig. Ein Thread fügt Inhalt zu einem bestimmten DOM-Knoten hinzu und der andere Thread löscht den Knoten. Welchen Thread sollte der Browser in diesem Fall verwenden? </p><p>Um Komplexität zu vermeiden, ist JavaScript seit seiner Geburt Single-Threaded. Dies ist zum Kernmerkmal dieser Sprache geworden und wird sich auch in Zukunft nicht ändern. <br>Um die Rechenleistung von Multi-Core-CPUs zu nutzen, <strong>HTML5 schlägt den Web Worker-Standard vor, der es JavaScript-Skripten ermöglicht, mehrere Threads zu erstellen, die untergeordneten Threads werden jedoch vollständig vom Haupt-Thread gesteuert und müssen dies auch tun Betreiben Sie das DOM nicht</strong>. Daher ändert dieser neue Standard nichts an der Single-Threaded-Natur von JavaScript. </p><p><strong>2.Ereignisschleife</strong></p><p>Alle Aufgaben in JavaScript können in zwei Typen unterteilt werden, einer ist eine synchrone Aufgabe und der andere eine asynchrone Aufgabe (z. B. verschiedene Browserereignisse, Timer und Ajax usw.). <strong>Synchronische Aufgaben beziehen sich auf Aufgaben, die zur Ausführung im Hauptthread in die Warteschlange gestellt werden. Die nächste Aufgabe kann erst ausgeführt werden, nachdem die vorherige Aufgabe ausgeführt wurde. Asynchrone Aufgaben beziehen sich auf Aufgaben, die nicht in den Hauptthread, sondern in die „Aufgabenwarteschlange“ gelangen. Nur wenn die „Aufgabenwarteschlange“ den Hauptthread benachrichtigt, dass eine asynchrone Aufgabe ausgeführt werden kann, gelangt die Aufgabe zur Ausführung in den Hauptthread </strong>. </p><p>Im Einzelnen ist der Betriebsmechanismus der asynchronen Ausführung wie folgt. (Dasselbe gilt für die synchrone Ausführung, da sie als asynchrone Ausführung ohne asynchrone Aufgaben betrachtet werden kann.) </p><p> (1) Alle synchronen Aufgaben werden im Hauptthread ausgeführt und bilden einen Ausführungskontextstapel. </p><p> (2) Zusätzlich zum Hauptthread gibt es auch eine „Aufgabenwarteschlange“. Solange die asynchrone Aufgabe laufende Ergebnisse hat, wird ein Ereignis in die „Aufgabenwarteschlange“ gestellt. </p><p> (3) Sobald alle Synchronisierungsaufgaben im „Ausführungsstapel“ abgeschlossen sind, liest das System die „Aufgabenwarteschlange“, um zu sehen, welche Ereignisse darin enthalten sind. Diese entsprechenden asynchronen Aufgaben beenden den Wartezustand, betreten den Ausführungsstapel und beginnen mit der Ausführung. </p><p> (4) Der Hauptthread wiederholt den dritten Schritt oben </p><p><strong>Der Hauptthread liest Ereignisse aus der „Aufgabenwarteschlange“, sodass der gesamte Vorgang ausgeführt wird Mechanismus wird auch Ereignisschleife genannt </strong></p><p   style="max-width:90%"><span class="img-wrap"><img src="https://img.php.cn//upload/image/280/170/433/1539669867171806.png" title="1539669867171806.png" alt="Detaillierte Einführung in den JS-Thread-Mechanismus und den Ereignismechanismus (Bild und Text)"></span><br>Das folgende Beispiel veranschaulicht die Ereignisschleife gut: </p><pre class="brush:php;toolbar:false">    setTimeout(function () {
      console.log('timeout 2222')
      alert('22222222')
    }, 2000)
    setTimeout(function () {
      console.log('timeout 1111')
      alert('1111111')
    }, 1000)
    setTimeout(function () {
      console.log('timeout() 00000')
    }, 0)//当指定的值小于 4 毫秒，则增加到 4ms（4ms 是 HTML5 标准指定的，对于 2010 年及之前的浏览器则是 10ms）
    function fn() {
      console.log('fn()')
    }
    fn()
    console.log('alert()之前')
    alert('------') //暂停当前主线程的执行, 同时暂停计时, 点击确定后, 恢复程序执行和计时
    console.log('alert()之后')

<input>
<button>计算</button>
<script>
  // 1 1 2 3 5 8    f(n) = f(n-1) + f(n-2)
  function fibonacci(n) {
    return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2)  //递归调用
  }
  var input = document.getElementById(&#39;number&#39;)
  document.getElementById(&#39;btn&#39;).onclick = function () {
    var number = input.value
    var result = fibonacci(number)
    alert(result)
  }
</script>

var worker = new Worker('work.js');

  var input = document.getElementById('number')
  document.getElementById('btn').onclick = function () {
    var number = input.value
    //创建一个Worker对象
    var worker = new Worker('worker.js')
    // 绑定接收消息的监听
    worker.onmessage = function (event) {
      console.log('主线程接收分线程返回的数据: '+event.data)
      alert(event.data)
    }
    // 向分线程发送消息
    worker.postMessage(number)
    console.log('主线程向分线程发送数据: '+number)
  }
    console.log(this) // window

//worker.js文件
function fibonacci(n) {
  return n<p>这样当分线程在计算时，用户界面还可以操作，而且更早拿到计算后数据，响应速度更快了。</p><p style="text-align: center;"><img src="https://img.php.cn//upload/image/673/101/817/1539670027106347.gif" title="1539670027106347.gif" alt="Detaillierte Einführung in den JS-Thread-Mechanismus und den Ereignismechanismus (Bild und Text)"><span class="img-wrap"></span></p><p><strong>3. Web Workers的缺点</strong></p>