摘要：的單線程，與它的用途有關。為了利用多核的計算能力，提出標準，允許腳本創建多個線程，但是子線程完全受主線程控制，且不得操作。

進程是指程序的一次執行,它占有一片獨有的內存空間,可以通過windows任務管理器查看進程(如下圖)。同一個時間里，同一個計算機系統中允許兩個或兩個以上的進程處于并行狀態，這是多進程。比如電腦同時運行微信，QQ，以及各種瀏覽器等。瀏覽器運行是有些是單進程，如firefox和老版IE，有些是多進程，如chrome和新版IE。

有些進程還不止同時干一件事，比如Word，它可以同時進行打字、拼寫檢查、打印等事情。在一個進程內部，要同時干多件事，就需要同時運行多個“子任務”，我們把進程內的這些“子任務”稱為線程（Thread）。
線程是指CPU的基本調度單位,是程序執行的一個完整流程，是進程內的一個獨立執行單元。多線程是指在一個進程內, 同時有多個線程運行。瀏覽器運行是多線程。比如用瀏覽器一邊下載，一邊聽歌，一邊看視頻。另外我們需要知道JavaScript語言的一大特點就是單線程，為了利用多核CPU的計算能力，HTML5提出Web Worker標準，允許JavaScript腳本創建多個線程，但是子線程完全受主線程控制，且不得操作DOM。所以，這個新標準并沒有改變JavaScript單線程的本質。

由于每個進程至少要干一件事，所以，一個進程至少有一個線程。當然，像Word這種復雜的進程可以有多個線程，多個線程可以同時執行，多線程的執行方式和多進程是一樣的，也是由操作系統在多個線程之間快速切換，讓每個線程都短暫地交替運行，看起來就像同時執行一樣。當然，真正地同時執行多線程需要多核CPU才可能實現。

應用程序必須運行在某個進程的某個線程上

一個進程中至少有一個運行的線程: 主線程, 進程啟動后自動創建

一個進程中如果同時運行多個線程, 那這個程序是多線程運行的

一個進程的內存空間是共享的，每個線程都可以使用這些共享內存。

多個進程之間的數據是不能直接共享的

單線程的優點:順序編程簡單易懂

單線程的缺點:效率低

多線程的優點:能有效提升CPU的利用率

多線程的缺點:

創建多線程開銷

線程間切換開銷

死鎖與狀態同步問題

瀏覽器的內核是指支持瀏覽器運行的最核心的程序，分為兩個部分的，一是渲染引擎，另一個是JS引擎。現在JS引擎比較獨立，內核更加傾向于說渲染引擎。

Chrome, Safari: webkit

firefox: Gecko

IE: Trident

360,搜狗等國內瀏覽器: Trident + webkit

html,css文檔解析模塊 : 負責頁面文本的解析

dom/css模塊 : 負責dom/css在內存中的相關處理

布局和渲染模塊 : 負責頁面的布局和效果的繪制

定時器模塊 : 負責定時器的管理

網絡請求模塊 : 負責服務器請求(常規/Ajax)

事件響應模塊 : 負責事件的管理

我們先來看個例子，試問定時器會保證200ms后執行嗎？

 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 < 1000000000; i++) {
      }
    }

事實上，經過了625ms后定時器才執行。定時器并不能保證真正定時執行，一般會延遲一丁點,也有可能延遲很長時間(比如上面的例子)

定時器回調函數在主線程執行的, 具體實現方式下文會介紹。

JavaScript語言的一大特點就是單線程，也就是說，同一個時間只能做一件事。那么，為什么JavaScript不能有多個線程呢？這樣能提高效率啊。

JavaScript的單線程，與它的用途有關。作為瀏覽器腳本語言，JavaScript的主要用途是與用戶互動，以及操作DOM。這決定了它只能是單線程，否則會帶來很復雜的同步問題。比如，假定JavaScript同時有兩個線程，一個線程在某個DOM節點上添加內容，另一個線程刪除了這個節點，這時瀏覽器應該以哪個線程為準？

所以，為了避免復雜性，從一誕生，JavaScript就是單線程，這已經成了這門語言的核心特征，將來也不會改變。
為了利用多核CPU的計算能力，HTML5提出Web Worker標準，允許JavaScript腳本創建多個線程，但是子線程完全受主線程控制，且不得操作DOM。所以，這個新標準并沒有改變JavaScript單線程的本質。

JavaScript中所有任務可以分成兩種，一種是同步任務，另一種是異步任務(如各種瀏覽器事件、定時器和Ajax等)。同步任務指的是，在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行后一個任務；異步任務指的是，不進入主線程、而進入"任務隊列"（task queue）的任務，只有"任務隊列"通知主線程，某個異步任務可以執行了，該任務才會進入主線程執行。

具體來說，異步執行的運行機制如下。（同步執行也是如此，因為它可以被視為沒有異步任務的異步執行。）

（1）所有同步任務都在主線程上執行，形成一個執行棧（execution context stack）。

（2）主線程之外，還存在一個"任務隊列"（task queue）。只要異步任務有了運行結果，就在"任務隊列"之中放置一個事件。

（3）一旦"執行棧"中的所有同步任務執行完畢，系統就會讀取"任務隊列"，看看里面有哪些事件。那些對應的異步任務，于是結束等待狀態，進入執行棧，開始執行。

（4）主線程不斷重復上面的第三步

主線程從"任務隊列"中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為Event Loop（事件循環）

下面這個例子很好闡釋事件循環：

    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()之后")

有兩點我們需要注意下：

定時器零延遲(setTimeout(func, 0))并不是意味著回調函數立刻執行。至少4ms,才會執行回調函數。它取決于主線程當前是否空閑與“任務隊列”里其前面正在等待的任務。

只有在到達指定時間時，定時器就會將相應回調函數插入“任務隊列”尾部

總結:異步任務（各種瀏覽器事件、定時器和Ajax等）都是先添加到“任務隊列”（定時器則到達其指定參數時）。當 Stack 棧（JavaScript 主線程）為空時，就會讀取 Queue 隊列（任務隊列）的第一個任務（隊首），最后執行。

正如上面所提到，JavaScript是單線程。當一個頁面加載一個復雜運算的 js 文件時，用戶界面可能會短暫地“凍結”，不能再做其他操作。比如下面這個例子：

計算

很顯然遇到這種頁面堵塞情況，很影響用戶體驗的，有沒有啥辦法可以改進這種情形？----Web Worker就應運而生了！

Web Worker 的作用，就是為 JavaScript 創造多線程環境，允許主線程創建 Worker 線程，將一些任務分配給后者運行。在主線程運行的同時，Worker 線程在后臺運行，兩者互不干擾。等到 Worker 線程完成計算任務，再把結果返回給主線程。這樣的好處是，一些計算密集型或高延遲的任務，被 Worker 線程負擔了，主線程（通常負責 UI 交互）就會很流暢，不會被阻塞或拖慢。其原理圖如下：

主線程

首先主線程采用new命令，調用Worker()構造函數，新建一個 Worker 線程

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

然后主線程調用worker.postMessage()方法，向 Worker 發消息。

接著，主線程通過worker.onmessage指定監聽函數，接收子線程發回來的消息。

  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 線程

Worker 線程內部需要有一個監聽函數，監聽message事件。

通過 postMessage(data) 方法來向主線程發送數據。

//worker.js文件
function fibonacci(n) {
  return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2)  //遞歸調用
}
console.log(this)//[object DedicatedWorkerGlobalScope]
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, 所以在分線程中不可能更新界面
}

這樣當分線程在計算時，用戶界面還可以操作，而且更早拿到計算后數據，響應速度更快了。

不能跨域加載JS

worker內代碼不能訪問DOM(更新UI)

不是每個瀏覽器都支持這個新特性(本文例子只能在Firefox瀏覽器上運行，chrome不支持)

如果需要源代碼，請猛戳Web Workers

如果覺得文章對你有些許幫助，歡迎在我的GitHub博客點贊和關注，感激不盡！