JavaScript的三座大山之單線程和異步

一、進程與線程

1. 進程：

程序的一次執行, 它占有一片獨有的內存空間  —- 可以通過windows任務管理器查看進程；

2. 線程：

是進程內的一個獨立執行單元；是程序執行的一個完整流程；CPU的基本調度單位；

3. 進程與線程的關系：

  * 一個進程中一般至少有一個運行的線程: 主線程 — 進程啟動後自動創建；

  * 一個進程中也可以同時運行多個線程, 我們會說程序是多線程運行的；

  * 一個進程內的數據可以供其中的多個線程直接共享；

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

4. 瀏覽器運行是單進程還是多進程?

• 有的是單進程
• firefox
• 有的是多進程
• chrome

5. 如何查看瀏覽器是否是多進程運行的呢?

任務管理器==>進程

6. 瀏覽器運行是單線程還是多線程?

都是多線程運行的

二、單線程 

1、什麼是單線程

JavaScript語言的一大特點就是單線程，也就是說同一時間隻能做一件事。

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

2. JavaScript為什麼是單線程

• 首先是歷史原因，在創建 javascript 這門語言時，多進程、多線程的架構並不流行，硬件支持並不好。
• 其次是因為多線程的復雜性，多線程操作需要加鎖，編碼的復雜性會增高。
• 最後與它的用途有關，作為瀏覽器腳本語言，JavaScript的主要用途是與用戶互動，以及操作DOM，如果同時操作 DOM ，在多線程不加鎖的情況下，最終會導致 DOM 渲染的結果不可預期。

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

三、同步與異步

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

同步任務： 

在主線程上排隊執行的任務，隻有前一個任務執行完畢，才能執行後一個任務；

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

 異步任務：在主線程外執行的任務；在主線程之外還存在一個“任務隊列”（task queue）,當異步任務執行完成後會以回調函數的方式放入任務隊列中等待，等主線程空閑時，主線程就會去事件隊列中取出等待的回調函數放入主線程中進行執行。這個過程反復執行就形成瞭js的事件循環機制（Event Loop）。

//栗子🌰 
// 同步
console.log(1)
// 異步
setTimeout(()=>{
    console.log(2)
},100)
// 同步
console.log(3)
//輸出順序 1 3 2

2、 JavaScript為什麼需要異步

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

3、JavaScript怎麼實現異步 

1）執行棧與任務隊列 

其實上面我們已經提到瞭，JS實現異步時通過 事件循環；

我們先理解幾個概念：

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

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

栗子 🌰

//（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環境

 栗子 🌰 

//（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) // 宏任務，單比（1）(2)宏任務早
},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

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

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!      

推薦閱讀：

• 淺談JavaScript宏任務和微任務執行順序
• 深入瞭解Javascript的事件循環機制
• JS前端宏任務微任務及Event Loop使用詳解
• 一篇文章帶你瞭解vue.js的事件循環機制
• Javascript運行機制之Event Loop