1.為什么JavaScript是單線程？

JavaScript語言的一大特點就是單線程，也就是說，同一個時間只能做一件事。那么，為什么JavaScript不能有多個線程呢？這樣能提高效率啊。
JavaScript的單線程，與它的用途有關。作為瀏覽器腳本語言，JavaScript的主要用途是與用戶互動，以及操作DOM。這決定了它只能是單線程，否則會帶來很復雜的同步問題。比如，假定JavaScript同時有兩個線程，一個線程在某個DOM節點上添加內容，另一個線程刪除了這個節點，這時瀏覽器應該以哪個線程為準？
所以，為了避免復雜性，從一誕生，JavaScript就是單線程，這已經成了這門語言的核心特征，將來也不會改變。
**
為了利用多核CPU的計算能力，HTML5提出Web Worker標準，允許JavaScript腳本創建多個線程，但是子線程完全受主線程控制，且不得操作DOM。所以，這個新標準并沒有改變JavaScript單線程的本質。
**

---

JS引擎中負責解釋和執行JavaScript代碼的線程只有一個。我們叫它主線程。

但是實際上還存在其他的線程。例如：處理AJAX請求的線程、處理DOM事件的線程、定時器線程、讀寫文件的線程(例如在Node.js中)等等。這些線程可能存在于JS引擎之內，也可能存在于JS引擎之外，在此我們不做區分。不妨叫它們工作線程。

---

2.同步與異步

看一段代碼

console.log('我要做第一件事情'); console.log('我要做第二件事情');

這段代碼的實現就叫做同步,也就是說按照順序去做,做完第一件事情之后,再去做第二件事情

再看一段代碼

console.log('我要做第一件事情'); setTimeout(function () {console.log('我突然有事,晚點再做第二件事情'); },1000) console.log('我要做第三件事情');

這段代碼的實現就叫做異步,也就是說不完全按照順序去做,
突發情況,第二件事情不能立刻完成,所以等待一段時間再去完成,
優先去做后面的第三件事情,這樣就不耽擱時間。

---

3.異步的形成過程

為什么需要異步呢

前面提過JavaScript是單線程的,
那么單線程就意味著，所有任務需要排隊，前一個任務結束，才會執行后一個任務。如果前一個任務耗時很長，后一個任務就不得不一直等著。
如果排隊是因為計算量大，CPU忙不過來，倒也算了，但是很多時候CPU是閑著的，因為IO設備（輸入輸出設備）很慢（比如Ajax操作從網絡讀取數據），不得不等著結果出來，再往下執行。
JavaScript語言的設計者意識到，這時主線程完全可以不管IO設備，掛起處于等待中的任務，先運行排在后面的任務。等到IO設備返回了結果，再回過頭，把掛起的任務繼續執行下去。
所以這就是異步過程的由來。

---

那么異步又是如何實現的呢？

1.主線程發起一個異步請求，相應的工作線程接收請求并告知主線程已收到(異步函數返回)；
2.主線程可以繼續執行后面的代碼，同時工作線程執行異步任務；

3.工作線程完成工作后，通知主線程；
4.主線程收到通知后，執行一定的動作(調用回調函數)。

其實我們經常用到的dom事件也是屬于一個異步行為

舉一個栗子:

var button = document.getElement('#btn'); button.addEventListener('click', function(e) {console.log('按鈕'); });

從事件的角度來看，上述代碼表示：在按鈕上添加了一個鼠標單擊事件的事件監聽器；當用戶點擊按鈕時，鼠標單擊事件觸發，事件監聽器函數被調用。

從異步過程的角度看，addEventListener函數就是異步過程的發起函數，事件監聽函數就是異步過程的回調函數。
事件觸發時，表示異步任務完成，會將事件監聽器函數封裝成一條消息放到消息隊列中，等待主線程執行。

---

4.任務隊列(消息隊列)

"任務隊列"是一個事件的隊列（也可以理解成消息的隊列），工作線程完成一項任務，就在"任務隊列"中添加一個事件(也可以理解為發送一條消息)，表示相關的異步任務可以進入"執行棧"了。主線程讀取"任務隊列"，就是讀取里面有哪些事件。

那么這邊就要提到JavaScript 的運行機制了

• 所有同步任務都在主線程上執行，形成一個執行棧

• 主線程發起異步請求,相應的工作線程就會去執行異步任務,

主線程可以繼續執行后面的代碼

• 主線程之外，還存在一個"任務隊列"（task queue）。只要異步任務

有了運行結果，就在"任務隊列"之中放置一個事件,也就是一個消息。

• 一旦"執行棧"中的所有同步任務執行完畢，系統就會讀取"任務隊

列"，看看里面有哪些事件。那些對應的異步任務，于是結束等待狀
態，進入執行棧，開始執行。

• 主線程把當前的事件執行完成之后,再去讀取任務隊列,如此反復重復

執行,這樣就行程了事件循環

只要主線程空了，就會去讀取"任務隊列"，這就是JavaScript的運行機制。這個過程會不斷重復。

用一張圖來表示整個過程

---

5.Event Loop(事件循環)

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

---

macrotasks與microtasks的區別

• macrotasks: setTimeout setInterval setImmediate I/O UI渲染

• microtasks: Promise process.nextTick Object.observe MutationObserver

一個事件循環(EventLoop)中會有一個正在執行的任務(Task)，而這個任務就是從 macrotask 隊列中來的。當這個 macrotask 執行結束后所有可用的 microtask 將會在同一個事件循環中執行，當這些 microtask 執行結束后還能繼續添加 microtask 一直到整個 microtask 隊列執行結束。

通俗點來理解的話,就是microtask會在當前循環中執行完成,而macrotask會在下一個循環中執行
下面我們來看一段代碼,自己思考一下運行結果會是什么?

console.log('1'); setTimeout(function () {console.log('2');new Promise(function(resolve, reject) {console.log('promise-start2');resolve();}).then(function() {console.log('promise-end2');}); },0); new Promise(function(resolve, reject) {console.log('promise-start');resolve(); }).then(function() {console.log('promise-end'); }); setTimeout(function () {console.log('3'); },0); console.log('4');

運行結果

1 promise-start 4 promise-end 2 promise-start2 promise-end2 3

從結果可以看出
主進程這個macroTask（也就是1、promise-start和4）執行完了，自然會去執行promise then這個microTask。這是第一個循環。之后的setTimeout和promise屬于第二個循環。

這邊有一個注意點,就是主進程的代碼也屬于macroTask,因為主線程可以被視為沒有異步任務的異步執行

---

6.定時器

定時器功能主要由setTimeout()和setInterval()這兩個函數來完成，它們的內部運行機制完全一樣，區別在于前者指定的代碼是一次性執行，后者則為反復執行。以下主要討論setTimeout()。

console.log('1'); setTimeout(function () {console.log('2'); },0); console.log('3');

這段代碼的運行結果是1,3,2,表示0毫秒間隔運行指定的回調函數
那么竟然是0秒,為啥3會是在2前面打印呢

總之，setTimeout(fn,0)的含義是，指定某個任務在主線程最早可得的空閑時間執行，也就是說，盡可能早得執行。它在"任務隊列"的尾部添加一個事件，因此要等到同步任務和"任務隊列"現有的事件都處理完，才會得到執行。

HTML5標準規定了setTimeout()的第二個參數的最小值（最短間隔），不得低于4毫秒，如果低于這個值，就會自動增加。在此之前，老版本的瀏覽器都將最短間隔設為10毫秒。另外，對于那些DOM的變動（尤其是涉及頁面重新渲染的部分），通常不會立即執行，而是每16毫秒執行一次。這時使用requestAnimationFrame()的效果要好于setTimeout()。

需要注意的是，setTimeout()只是將事件插入了"任務隊列"，必須等到當前代碼（執行棧）執行完，主線程才會去執行它指定的回調函數。要是當前代碼耗時很長，有可能要等很久，所以并沒有辦法保證，回調函數一定會在setTimeout()指定的時間執行。

---

7.總結

以上是我對于JavaScript 運行機制的一些了解,
知道這些知識,對于我們去理解js的運行機智,還有對于同步異步的處理會有很大的幫助,如果您有不同的意見或者文章有錯誤的地方,可以給我留言,一起討論,謝謝
參考資料:
JavaScript 運行機制詳解：再談Event Loop

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的JavaScript 运行机制详解(理解同步、异步和事件循环)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。