js執行流程

1. 所有程式碼分類

• * 初始化執行程式碼(同步程式碼): 包含繫結dom事件監聽, 設定定時器, 傳送ajax請求的程式碼
• * 回撥執行程式碼(非同步程式碼): 處理回撥邏輯

2. js引擎執行程式碼的基本流程:

• * 初始化程式碼===>回撥程式碼

3. 模型的2個重要組成部分:

• * 事件(定時器/DOM事件/Ajax)管理模組
• * 回撥佇列

4. 模型的運轉流程

• * 執行初始化程式碼, 將事件回撥函式交給對應模組管理
• * 當事件發生時, 管理模組會將回調函式及其資料新增到回撥列隊中
• * 只有當初始化程式碼執行完後(可能要一定時間), 才會遍歷讀取回調佇列中的回撥函式執行

  function fn1() {
    console.log('fn1()')
  }
  fn1()
  // 5秒後將會在回撥佇列中加入500000個定時事件的回撥函式，用來阻塞下邊點選事件。
  //在點選按鈕前，佇列前將會有一定的定時回撥函式未執行，迫使點選事件的回掉函式排隊
  for(var i =0; i<500000;i++){ 
       setTimeout(function () {
    console.log('定時器執行了')
  }, 5000)   
  }
  document.getElementById('btn').onclick = function () {  
    console.log('點選了btn')
  }
  function fn2() {
    console.log('fn2()')
  }
  fn2()
 

 模型

使用Web Workers 實現多執行緒

1. H5規範提供了js分執行緒的實現, 取名為: Web Workers

2. 相關API

• * Worker: 建構函式, 載入分執行緒執行的js檔案
• * Worker.prototype.onmessage: 用於接收另一個執行緒的回撥函式
• * Worker.prototype.postMessage: 向另一個執行緒傳送訊息

3. 不足

• * worker內程式碼不能操作DOM(更新UI)
• * 不能跨域載入JS
• * 不是每個瀏覽器都支援這個新特性

main.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<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2)  //遞迴呼叫
}

console.log(this)
this.onmessage = function (event) {
  var number = event.data
  console.log('分執行緒接收到主執行緒傳送的資料: '+number)
  //計算
  var result = fibonacci(number) 
  postMessage(result)
  console.log('分執行緒向主執行緒返回資料: '+result)
  // alert(result)  alert是window的方法, 在分執行緒不能呼叫
  // 分執行緒中的全域性物件不再是window, 所以在分執行緒中不可能更新介面
}