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

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

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

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

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

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

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

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

多個進程之間的數(shù)據(jù)是不能直接共享的

單線程的優(yōu)點:順序編程簡單易懂

單線程的缺點:效率低

多線程的優(yōu)點:能有效提升CPU的利用率

多線程的缺點:

創(chuàng)建多線程開銷

線程間切換開銷

死鎖與狀態(tài)同步問題

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

Chrome, Safari: webkit

firefox: Gecko

IE: Trident

360,搜狗等國內(nèi)瀏覽器: Trident + webkit

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

dom/css模塊 : 負責dom/css在內(nèi)存中的相關處理

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

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

網(wǎng)絡請求模塊 : 負責服務器請求(常規(guī)/Ajax)

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

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

 document.getElementById("btn").onclick = function () {
      var start = Date.now()
      console.log("啟動定時器前...")
      setTimeout(function () {
        console.log("定時器執(zhí)行了", Date.now() - start)
      }, 200)
      console.log("啟動定時器后...")
      // 做一個長時間的工作
      for (var i = 0; i < 1000000000; i++) {
      }
    }

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

定時器回調(diào)函數(shù)在主線程執(zhí)行的, 具體實現(xiàn)方式下文會介紹。

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

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

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

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

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

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

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

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

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

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

下面這個例子很好闡釋事件循環(huán)：

    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("------") //暫停當前主線程的執(zhí)行, 同時暫停計時, 點擊確定后, 恢復程序執(zhí)行和計時
    console.log("alert()之后")

有兩點我們需要注意下：

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

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

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

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

計算

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

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

主線程

首先主線程采用new命令，調(diào)用Worker()構(gòu)造函數(shù)，新建一個 Worker 線程

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

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

接著，主線程通過worker.onmessage指定監(jiān)聽函數(shù)，接收子線程發(fā)回來的消息。

  var input = document.getElementById("number")
  document.getElementById("btn").onclick = function () {
    var number = input.value
    //創(chuàng)建一個Worker對象
    var worker = new Worker("worker.js")
    // 綁定接收消息的監(jiān)聽
    worker.onmessage = function (event) {
      console.log("主線程接收分線程返回的數(shù)據(jù): "+event.data)
      alert(event.data)
    }
    // 向分線程發(fā)送消息
    worker.postMessage(number)
    console.log("主線程向分線程發(fā)送數(shù)據(jù): "+number)
  }
    console.log(this) // window

Worker 線程

Worker 線程內(nèi)部需要有一個監(jiān)聽函數(shù)，監(jiān)聽message事件。

通過 postMessage(data) 方法來向主線程發(fā)送數(shù)據(jù)。

//worker.js文件
function fibonacci(n) {
  return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2)  //遞歸調(diào)用
}
console.log(this)//[object DedicatedWorkerGlobalScope]
this.onmessage = function (event) {
  var number = event.data
  console.log("分線程接收到主線程發(fā)送的數(shù)據(jù): "+number)
  //計算
  var result = fibonacci(number)
  postMessage(result)
  console.log("分線程向主線程返回數(shù)據(jù): "+result)
  // alert(result)  alert是window的方法, 在分線程不能調(diào)用
  // 分線程中的全局對象不再是window, 所以在分線程中不可能更新界面
}

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

不能跨域加載JS

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

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

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

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