JavaScript 運行機制詳解(理解同步、異步和事件循環)

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（也就是一、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