JS三座大山再學習(三、異步和單線程）

本文已發布在西瓜君的個人博客,原文傳送門

前言

寫這一篇的時候，西瓜君查閱了很多資料和文章，但是相當多的文章寫的都很簡單，甚至互相之間有矛盾，這讓我很困擾；同時也讓我堅定了要寫出一篇好的關於JS異步、單線程、事件循環的文章，下面，讓我們一起來學習本文吧，沖鴨~~

單線程

1. 什么是單線程

//栗子1
console.log(1)
console.log(2)
console.log(3)
//輸出順序 1 2 3

單線程即同一時間只做一件事

2. JavaScript為什么是單線程

• 首先是歷史原因，在創建 javascript 這門語言時，多進程多線程的架構並不流行，硬件支持並不好。
• 其次是因為多線程的復雜性，多線程操作需要加鎖，編碼的復雜性會增高。
• 而且，如果同時操作 DOM ，在多線程不加鎖的情況下，最終會導致 DOM 渲染的結果不可預期

為了利用多核CPU的計算能力，HTML5提出Web Worker標准，允許JavaScript腳本創建多個線程，但是子線程完全受主線程控制，且不得操作DOM。所以，這個新標准並沒有改變JavaScript單線程的本質。

異步

1.JS的 同步任務/異步任務

• 同步任務：在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行后一個任務

• 異步：不進入主線程、而進入"任務隊列"（task queue）的任務，只有"任務隊列"通知主線程，某個異步任務可以執行了，該任務才會進入主線程執行

//異步的栗子
console.log(1)

setTimeout(()=>{
    console.log(2)
},100)

console.log(3)
//輸出順序 1 3 2

2. JavaScript為什么需要異步

如果在JS代碼執行過程中，某段代碼執行過久，后面的代碼遲遲不能執行，產生阻塞（即卡死），會影響用戶體驗。

JavaScript怎么實現異步

JS 實現異步時通過 事件循環（Event Loop），下面我們來了解一下

1.執行棧與任務隊列

先理解幾個概念

• JS任務 分為同步任務（synchronous）和異步任務（asynchronous）
• 同步任務都在 JS引擎線程（主線程） 上執行，形成一個執行棧(call stack)
• 事件觸發線程 管理一個 任務隊列(Task Queue)
• 異步任務 觸發條件達成，將 回調事件 放到任務隊列(Task Queue)中
• 執行棧中所有同步任務執行完畢，此時JS引擎線程空閑，系統會讀取任務隊列，將可運行的異步任務回調事件添加到執行棧中，開始執行

當一個JS文件第一次執行的時候，js引擎會 解析這段代碼，並將其中的同步代碼 按照執行順序加入執行棧中，然后從頭開始執行。如果當前執行的是一個方法，那么js會向執行棧中添加這個方法的執行環境，然后進入這個執行環境繼續執行其中的代碼。當這個執行環境中的代碼 執行完畢並返回結果后，js會退出這個執行環境並把這個執行環境銷毀，回到上一個方法的執行環境。這個過程反復進行，直到執行棧中的代碼全部執行完畢。

舉個栗子：

//Event loop

//（1）
console.log(1)

//（2）
setTimeout(()=>{
    console.log(2)
},100)

//（3）
console.log(3)

1. 先解析整段代碼，按照順序加入到執行棧中，從頭開始執行
2. 先執行（1），是同步的，所以直接打印 1
3. 執行（2），發現是 setTimeout，於是調用瀏覽器的方法（webApi）執行，在 100ms后將 console.log(2) 加入到任務隊列
4. 執行（3），同步的，直接打印 3
5. 執行棧已經清空了，現在檢查任務隊列，（執行太快的話可能此時任務隊列還是空的，沒到100ms，還沒有將（2）的打印加到任務隊列，於是不停的檢測，直到隊列中有任務），發現有 console.log(2)，於是添加到執行棧，執行console.log(2)，同步代碼，直接打印 2 （如果這里是異步任務，同樣會再走一遍循環：-->任務隊列->執行棧）

所以結果是 1 3 2

注：setTimeout/Promise等我們稱之為任務源。而進入任務隊列的是他們指定的回調

2.宏任務(macro task)與微任務(micro task)

上面的循環只是一個宏觀的表述，實際上異步任務之間也是有不同的，分為 宏任務(macro task) 與 微任務(micro task)，最新的標准中，他們被稱為 task與 jobs

• 宏任務有哪些：script(整體代碼), setTimeout, setInterval, setImmediate, I/O, UI rendering（渲染）
• 微任務有哪些：process.nextTick, Promise, Object.observe(已廢棄), MutationObserver(html5新特性)

下面我們再詳細講解一下執行過程

執行棧在執行的時候，會把宏任務放在一個宏任務的任務隊列，把微任務放在一個微任務的任務隊列，在當前執行棧為空的時候，主線程會 查看微任務隊列是否有事件存在。如果微任務隊列不存在，那么會去宏任務隊列中 取出一個任務 加入當前執行棧；如果微任務隊列存在，則會依次執行微任務隊列中的所有任務，直到微任務隊列為空（同樣，是吧隊列中的事件加到執行棧執行），然后去宏任務隊列中取出最前面的一個事件加入當前執行棧...如此反復，進入循環。

注：

• 宏任務和微任務的任務隊列都可以有多個
• 當前執行棧執行完畢時會立刻先處理所有微任務隊列中的事件，然后再去宏任務隊列中取出一個事件。同一次事件循環中，微任務永遠在宏任務之前執行。
• 不同的運行環境 循環策略可能有不同，這里探討chrome、node環境

舉個栗子：

//Event loop


//（1）
setTimeout(()=>{
    console.log(1)
},100)

//（2）
setTimeout(()=>{
    console.log(2)
},100)

//（3）
new Promise(function(resolve,reject){
    //（4）
    console.log(3)
    resolve(4)
}).then(function(val){
    //（5）
    console.log(val);
})

//（6）
new Promise(function(resolve,reject){
    //（7）
    console.log(5)
    resolve(6)
}).then(function(val){
    //（8）
    console.log(val);
})

//（9）
console.log(7)

//（10）
setTimeout(()=>{
    console.log(8)
},50)

*上面的代碼在node和chrome環境的正確打印順序是 3 5 7 4 6 8 1 2

下面分析一下執行過程：

1. 全部代碼在解析后加入執行棧
2. 執行（1），宏任務，調用webapi setTimeout，這個方法會在100ms后將回調函數放入宏任務的任務隊列
3. 執行（2），同（1），但是會比（1）稍后一點
4. 執行（3），同步執行new Promise，然后執行（4），直接打印 3 ，然后resolve(4)，然后.then()，把（5）放入微任務的任務隊列
5. 執行（6），同上，先打印 5 ，再執行resolve(6)，然后.then()里面的內容（8）加入到微任務的任務隊列
6. 執行（9），同步代碼，直接打印 7
7. 執行（10），同（1）和（2），只是時間更短，會在 50ms 后將回調 console.log(8) 加入宏任務的任務隊列
8. 現在執行棧清空了，開始檢查微任務隊列，發現（5），加入到執行棧執行，是同步代碼，直接打印 4
9. 任務隊列又執行完了，又檢查微任務隊列，發現（8），打印 6
10. 任務隊列又執行完了，檢查微任務隊列，沒有任務，再檢查宏任務隊列，此時如果超過了50ms的話，會發現 console.log(8) 在宏任務隊列中，於是執行 打印 8
11. 依次打印 1 2

注：因為渲染也是宏任務，需要在一次執行棧執行完后才會執行渲染，所以如果執行棧中同時有幾個同步的改變同一個樣式的代碼，在渲染時只會渲染最后一個

結語

寫到這里，仍然覺得還有很多知識點沒有寫出來，但是想寫又不知道從哪里入手。於是決定今天就寫到這里，日后再做補充。
到這篇，JS三座大山系列就暫時完結了，在這其中自己也學到了很多，希望能繼續輸出一些有意義的東西，加油，西瓜君~~

參考文章：

https://www.jianshu.com/p/12b9f73c5a4f
https://www.cnblogs.com/cangqinglang/p/8967268.html

如有錯誤，請斧正

以上