JSのスレッド機構とイベント機構の詳しい紹介（画像とテキスト）

 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="JSのスレッド機構とイベント機構の詳しい紹介（画像とテキスト）"></span><br>実際には、タイマーは 625 ミリ秒が経過するまで実行されません。タイマーは実際のタイミングで実行されることを保証しません。通常は少し遅れるか、長時間遅れる可能性があります (上記の例など)。</p><p><strong>2 タイマー コールバック関数です。別スレッドで実行する? </strong></p><p><strong>タイマーコールバック関数はメインスレッド上で実行されます。具体的な実装方法を以下に紹介します。 </strong></p><p>4. ブラウザ イベント ループ (ポーリング) モデル<strong></strong></p><p>1. JavaScript がシングルスレッドである理由<strong></strong></p># JavaScript 言語の主な特徴の 1 つはシングルスレッドです。つまり、同時に 1 つのことしか実行できません。では、なぜ JavaScript は複数のスレッドを持てないのでしょうか?これにより効率が向上します。 <p><strong>JavaScript の単一スレッドは、その目的に関連しています。ブラウザーのスクリプト言語としての JavaScript の主な目的は、ユーザーと対話して DOM を操作することです。これにより、シングルスレッドのみが可能であることが決まります。そうでない場合は、非常に複雑な同期の問題が発生します。たとえば、JavaScript に同時に 2 つのスレッドがあるとします。1 つのスレッドが特定の DOM ノードにコンテンツを追加し、もう 1 つのスレッドがそのノードを削除するとします。この場合、ブラウザーはどちらのスレッドを使用すればよいでしょうか。 </strong></p>したがって、複雑さを避けるために、JavaScript は誕生以来シングルスレッドであり、これがこの言語の中心的な機能となっており、今後も変更されることはありません。 <p>マルチコア CPU のコンピューティング能力を活用するために、</p>HTML5 は Web Worker 標準を提案しています。これにより、JavaScript スクリプトは複数のスレッドを作成できますが、子スレッドはメインスレッドによって完全に制御されるため、 DOM<p> では操作できません。したがって、この新しい標準は JavaScript のシングルスレッドの性質を変更しません。 <br><strong></strong>2.イベント ループ</p><p><strong>JavaScript のすべてのタスクは 2 つのタイプに分類できます。1 つは同期タスク、もう 1 つは非同期タスク (さまざまなブラウザ イベントなど) 、タイマー、Ajax など)。 </strong> 同期タスクとは、メイン スレッドで実行するためにキューに入れられたタスクを指します。次のタスクは、前のタスクが実行された後にのみ実行できます。非同期タスクは、メイン スレッドには入らないが「タスク キュー」に入るタスクを指します。タスク キュー)。キュー)、「タスク キュー」が非同期タスクを実行できることをメイン スレッドに通知した場合にのみ、タスクは実行のためにメイン スレッドに入ります。 </p><p>具体的には、非同期実行の動作仕組みは以下のとおりです。 (同期実行についても同様です。非同期タスクがなければ非同期実行とみなすことができるためです。) <strong></strong>(1) すべての同期タスクはメインスレッドで実行され、実行コンテキスト スタックを形成します。 </p><p>(2) メインスレッドの他に「タスクキュー」もあります。非同期タスクに実行結果がある限り、イベントは「タスク キュー」に配置されます。 </p><p>(3) 「実行スタック」内のすべての同期タスクが完了すると、システムは「タスク キュー」を読み取り、その中にどのようなイベントがあるかを確認します。これらの対応する非同期タスクは待機状態を終了し、実行スタックに入り、実行を開始します。 </p><p>(4) メイン スレッドは上記の 3 番目の手順を繰り返します。</p><p></p>メイン スレッドは「タスク キュー」からイベントを読み取ります。このプロセスは周期的であるため、プロセス全体が動作します。このメカニズムはイベント ループとも呼ばれます。 <p></p><p><strong></strong></p>#次の例はイベント ループをよく示しています: <p   style="max-width:90%"></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="JSのスレッド機構とイベント機構の詳しい紹介（画像とテキスト）"><span class="img-wrap"></span></p><p><strong>3. Web Workers的缺点</strong></p>