JavaScript 逐點突破之單執行緒與異步，作為前端必知必會

已知，JavaScript 是單執行緒的，天生異步，適合 IO 密集型，不適合 CPU 密集型，但是，為什么是異步的喃，異步由何而來的喃，我們將在這里逐漸討論實作，

一、行程與執行緒

1. 瀏覽器是多行程的

它主要包括以下行程：

• Browser 行程：瀏覽器的主行程，唯一，負責創建和銷毀其它行程、網路資源的下載與管理、瀏覽器界面的展示、前進后退等，
• GPU 行程：用于 3D 繪制等，最多一個，
• 第三方插件行程：每種型別的插件對應一個行程，僅當使用該插件時才創建，
• 瀏覽器渲染行程（瀏覽器內核）：內部是多執行緒的，每打開一個新網頁就會創建一個行程，主要用于頁面渲染，腳本執行，事件處理等，

2. 渲染行程（瀏覽器內核）

瀏覽器的渲染行程是多執行緒的，頁面的渲染，JavaScript 的執行，事件的回圈，都在這個行程內進行：

• GUI 渲染執行緒：負責渲染瀏覽器界面，當界面需要重繪（Repaint）或由于某種操作引發回流(Reflow)時，該執行緒就會執行，
• JavaScript 引擎執行緒：也稱為 JavaScript 內核，負責處理 Javascript 腳本程式、決議 Javascript 腳本、運行代碼等，（例如 V8 引擎）
• 事件觸發執行緒：用來控制瀏覽器事件回圈，注意這不歸 JavaScript 引擎執行緒管，當事件被觸發時，該執行緒會把事件添加到待處理佇列的隊尾，等待 JavaScript 引擎的處理，
• 定時觸發器執行緒：傳說中的 setInterval 與 setTimeout 所在執行緒，注意，W3C 在 HTML 標準中規定，規定要求 setTimeout 中低于 4ms 的時間間隔算為 4ms ，
• 異步 http 請求執行緒：在 XMLHttpRequest 連接后通過瀏覽器新開一個執行緒請求，將檢測到狀態變更時，如果設定有回呼函式，異步執行緒就產生狀態變更事件，將這個回呼再放入事件佇列中，再由 JavaScript 引擎執行，

注意，GUI 渲染執行緒與 JavaScript 引擎執行緒是互斥的，當 JavaScript 引擎執行時 GUI 執行緒會被掛起（相當于被凍結了），GUI 更新會被保存在一個佇列中等到 JavaScript 引擎空閑時立即被執行，所以如果 JavaScript 執行的時間過長，這樣就會造成頁面的渲染不連貫，導致頁面渲染加載阻塞，

二、單執行緒的 JavaScript

所謂單執行緒，是指在 JavaScript 引擎中負責解釋和執行 JavaScript 代碼的執行緒唯一，同一時間上只能執行一件任務，

問題：首先為什么要引入單執行緒喃？

我們知道：

• 瀏覽器需要渲染 DOM
• JavaScript 可以修改 DOM 結構
• JavaScript 執行時，瀏覽器 DOM 渲染停止

如果 JavaScript 引擎執行緒不是單執行緒的，那么可以同時執行多段 JavaScript，如果這多段 JavaScript 都修改 DOM，那么就會出現 DOM 沖突，

你可能會說，web worker 就支持多執行緒，但是 web worker 不能訪問 window 物件，document 物件等，

原因：避免 DOM 渲染的沖突

當然，我們可以為瀏覽器引入鎖 的機制來解決這些沖突，但其大大提高了復雜性，所以 JavaScript從誕生開始就選擇了單執行緒執行，

引入單執行緒就意味著，所有任務需要排隊，前一個任務結束，才會執行后一個任務，這同時又導致了一個問題：如果前一個任務耗時很長，后一個任務就不得不一直等著，

// 實體1
let i, sum = 0
for(i = 0; i < 1000000000; i ++) {
    sum += i
}
console.log(sum)
復制代碼

在實體1中，sum 并不能立刻列印出來，必須在 for 回圈執行完成之后才能執行 console.log(sum) ，

// 實體2
console.log(1)
alert('hello')
console.log(2)
復制代碼

在實體2中，瀏覽器先列印 1 ，然后彈出彈框，點擊確定后才執行 console.log(2) ，

總結：

• 優點：實作比較簡單，執行環境相對單純
• 缺點：只要有一個任務耗時很長，后面的任務都必須排隊等著，會拖延整個程式的執行，常見的瀏覽器無回應（假死），往往就是因為某一段 Javascript 代碼長時間運行（比如死回圈），導致整個頁面卡在這個地方，其他任務無法執行，

為了解決這個問題，JavaScript 語言將任務的執行模式分為兩種：同步和異步

三、同步與異步

1. 同步

func(args...)
復制代碼

如果在函式 func 回傳的時候，呼叫者就能夠得到預期結果(即拿到了預期的回傳值或者看到了預期的效果)，那么這個函式就是同步的，

let a = 1
Math.floor(a)
console.log(a) // 1
復制代碼

2. 異步

如果在函式 func 回傳的時候，呼叫者還不能夠得到預期結果，而是需要在將來通過一定的手段得到，那么這個函式就是異步的，

fs.readFile('foo.txt', 'utf8', function(err, data) {
    console.log(data);
});
復制代碼

總結：

JavaScript 采用異步編程原因有兩點，

• 一是 JavaScript 是單執行緒；
• 二是為了提高 CPU 的利用率，

四、異步程序

fs.readFile('data.json', 'utf8', function(err, data) {
    console.log(data)
})
復制代碼

在執行這段代碼時，fs.readFile 函式回傳時，并不會立刻列印 data ，只有 data.json 讀取完成時才列印，也就是異步函式 fs.readFile 執行很快，但后面還有作業執行緒執行異步任務、通知主執行緒、主執行緒回呼等操作，這個程序就叫做異步程序，

主執行緒發起一個異步操作，相應的作業執行緒接受請求并告知主執行緒已收到（異步函式回傳）；主執行緒繼續執行后面的任務，同時作業執行緒執行異步任務；作業執行緒完成任務后，通知主執行緒；主執行緒收到通知后，執行一定的動作（呼叫回呼函式），

作業執行緒在異步操作完成后通知主執行緒，那么這個通知機制又是如何顯現喃？答案就是就是訊息佇列與事件回圈，

五、訊息佇列與事件回圈

作業執行緒將訊息放在訊息佇列，主執行緒通過事件回圈程序去取訊息，

• 訊息佇列：訊息佇列是一個先進先出的佇列，它里面存放著各種訊息，
• 事件回圈：事件回圈是指主執行緒重復從訊息佇列中取訊息、執行的程序，

1. 事件回圈（eventloop）

主執行緒不斷的從訊息佇列中取訊息，執行訊息，這個程序稱為事件回圈，這種機制叫事件回圈機制，取一次訊息并執行的程序叫一次回圈，

大致實作程序如下：

while(true) {
    var message = queue.get()
    execute(message)
}
復制代碼

例如：

$.ajax({
    url: 'xxxx',
    success: function(result) {
        console.log(1)
    }
})
setTimeout(function() {
    console.log(2)
}, 100)
setTimeout(function() {
    console.log(3)
})
console.log(4)
// output：4321 或 4312
復制代碼

其中，主執行緒：

// 主執行緒
console.log(4)
復制代碼

異步佇列：

// 異步佇列
function () {
    console.log(3)
}
function () { // 100ms后
    console.log(2)
}
function() { // ajax加載完成之后
    console.log(1)
}
復制代碼

事件回圈是JavaScript實作異步的具體解決方案，其中同步代碼，直接執行；異步函式先放在異步佇列中，待同步函式執行完畢后，輪詢執行 異步佇列 的回呼函式，

2. 訊息佇列

其中，訊息就是注冊異步任務時添加的回呼函式，

$.ajax('XXX', function(res) {
    console.log(res)
})
...
復制代碼

主執行緒在發起 AJAX 請求后，會繼續執行其他代碼，AJAX 執行緒負責請求 XXX，拿到請求后，會封裝成 JavaScript 物件，然后構造一條訊息：

// 訊息佇列里的訊息
var message = function () {
    callback(response)
}
復制代碼

其中 callback 是 AJAX 網路請求成功回應時的回呼函式，

主執行緒在執行完當前回圈中的所有代碼后，就會到訊息佇列取出這條訊息(也就是 message 函式)，并執行它，到此為止，就完成了作業執行緒對主執行緒的 通知 ，回呼函式也就得到了執行，如果一開始主執行緒就沒有提供回呼函式，AJAX 執行緒在收到 HTTP 回應后，也就沒必要通知主執行緒，從而也沒必要往訊息佇列放訊息，

異步程序中的回呼函式，一定不在當前這一輪事件回圈中執行，

六、異步與事件

訊息佇列中的每條訊息實際上都對應著一個事件，

其中一個重要的異步程序就是： DOM事件

var button = document.getElementById('button')
button.addEventListener('click', function(e) {
    console.log('事件')
})
復制代碼

從異步的角度看，addEventListener 函式就是異步程序的發起函式，事件監聽器函式就是異步程序的回呼函式，事件觸發時，表示異步任務完成，會將事件監聽器函式封裝成一條訊息放在訊息佇列中，等待主執行緒執行，

事件的概念實際上并不是必須的，事件機制實際上就是異步程序的通知機制，

另外，所有的異步程序也都可以用事件來描述，例如：

setTimeout(func, 1000)
// 可以看成：
timer.addEventListener('timeout', 1000, func)
復制代碼

七、生產者與消費者

生產者和消費者問題是執行緒模型中的經典問題：生產者和消費者在同一時間段內共用同一個存盤空間，生產者往存盤空間中添加資料，消費者從存盤空間中取走資料，當存盤空間為空時，消費者阻塞，當存盤空間滿時，生產者阻塞，

從生產者與消費者的角度看，異步程序是這樣的：

作業執行緒是生產者，主執行緒是消費者(只有一個消費者)，作業執行緒執行異步任務，執行完成后把對應的回呼函式封裝成一條訊息放到訊息佇列中；主執行緒不斷地從訊息佇列中取訊息并執行，當訊息佇列空時主執行緒阻塞，直到訊息佇列再次非空，

那么異步的實作方式有哪些喃？

• ES6之前：callback、eventloop、Promise
• ES6：Generator
• ES7:Async/Await

八、往期精彩JS系列文章

JavaScript逐點突破系列之函式知識點梳理，建議反復看有驚喜
JavaScript逐點突破系列之this是什么？了解完這7點很多疑惑都解決
JavaScript資料型別
JavaScript 運算子與邏輯分支
小編整了些JS面試題資料，小編放個小尾巴給大家點擊領取哦：JS面試題資料

喜歡這篇文章的請留下你們的點贊+評論哦，期待你們的評論！