摘要：從異步過程的角度看，函數(shù)就是異步過程的發(fā)起函數(shù)，事件監(jiān)聽函數(shù)就是異步過程的回調(diào)函數(shù)。事件觸發(fā)時(shí)，表示異步任務(wù)完成，會(huì)將事件監(jiān)聽器函數(shù)封裝成一條消息放到消息隊(duì)列中，等待主線程執(zhí)行。

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

JS引擎中負(fù)責(zé)解釋和執(zhí)行JavaScript代碼的線程只有一個(gè)。我們叫它主線程。

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

看一段代碼

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

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

再看一段代碼

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

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

為什么需要異步呢

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

那么異步又是如何實(shí)現(xiàn)的呢？

1.主線程發(fā)起一個(gè)異步請求，相應(yīng)的工作線程接收請求并告知主線程已收到(異步函數(shù)返回)；
2.主線程可以繼續(xù)執(zhí)行后面的代碼，同時(shí)工作線程執(zhí)行異步任務(wù)；

3.工作線程完成工作后，通知主線程；
4.主線程收到通知后，執(zhí)行一定的動(dòng)作(調(diào)用回調(diào)函數(shù))。

其實(shí)我們經(jīng)常用到的dom事件也是屬于一個(gè)異步行為

舉一個(gè)栗子:

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

從事件的角度來看，上述代碼表示：在按鈕上添加了一個(gè)鼠標(biāo)單擊事件的事件監(jiān)聽器；當(dāng)用戶點(diǎn)擊按鈕時(shí)，鼠標(biāo)單擊事件觸發(fā)，事件監(jiān)聽器函數(shù)被調(diào)用。

從異步過程的角度看，addEventListener函數(shù)就是異步過程的發(fā)起函數(shù)，事件監(jiān)聽函數(shù)就是異步過程的回調(diào)函數(shù)。
事件觸發(fā)時(shí)，表示異步任務(wù)完成，會(huì)將事件監(jiān)聽器函數(shù)封裝成一條消息放到消息隊(duì)列中，等待主線程執(zhí)行。

"任務(wù)隊(duì)列"是一個(gè)事件的隊(duì)列（也可以理解成消息的隊(duì)列），工作線程完成一項(xiàng)任務(wù)，就在"任務(wù)隊(duì)列"中添加一個(gè)事件(也可以理解為發(fā)送一條消息)，表示相關(guān)的異步任務(wù)可以進(jìn)入"執(zhí)行棧"了。主線程讀取"任務(wù)隊(duì)列"，就是讀取里面有哪些事件。

那么這邊就要提到JavaScript 的運(yùn)行機(jī)制了

所有同步任務(wù)都在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧

主線程發(fā)起異步請求,相應(yīng)的工作線程就會(huì)去執(zhí)行異步任務(wù),

主線程可以繼續(xù)執(zhí)行后面的代碼

主線程之外，還存在一個(gè)"任務(wù)隊(duì)列"（task queue）。只要異步任務(wù)

有了運(yùn)行結(jié)果，就在"任務(wù)隊(duì)列"之中放置一個(gè)事件,也就是一個(gè)消息。

一旦"執(zhí)行棧"中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)就會(huì)讀取"任務(wù)隊(duì)

列"，看看里面有哪些事件。那些對應(yīng)的異步任務(wù)，于是結(jié)束等待狀
態(tài)，進(jìn)入執(zhí)行棧，開始執(zhí)行。

主線程把當(dāng)前的事件執(zhí)行完成之后,再去讀取任務(wù)隊(duì)列,如此反復(fù)重復(fù)

執(zhí)行,這樣就行程了事件循環(huán)

只要主線程空了，就會(huì)去讀取"任務(wù)隊(duì)列"，這就是JavaScript的運(yùn)行機(jī)制。這個(gè)過程會(huì)不斷重復(fù)。

用一張圖來表示整個(gè)過程

主線程從"任務(wù)隊(duì)列"中讀取事件，這個(gè)過程是循環(huán)不斷的，所以整個(gè)的這種運(yùn)行機(jī)制又稱為Event Loop（事件循環(huán)）

macrotasks: setTimeout setInterval setImmediate I/O UI渲染

microtasks: Promise process.nextTick Object.observe MutationObserver

一個(gè)事件循環(huán)(EventLoop)中會(huì)有一個(gè)正在執(zhí)行的任務(wù)(Task)，而這個(gè)任務(wù)就是從 macrotask 隊(duì)列中來的。當(dāng)這個(gè) macrotask 執(zhí)行結(jié)束后所有可用的 microtask 將會(huì)在同一個(gè)事件循環(huán)中執(zhí)行，當(dāng)這些 microtask 執(zhí)行結(jié)束后還能繼續(xù)添加 microtask 一直到整個(gè) microtask 隊(duì)列執(zhí)行結(jié)束。

通俗點(diǎn)來理解的話,就是microtask會(huì)在當(dāng)前循環(huán)中執(zhí)行完成,而macrotask會(huì)在下一個(gè)循環(huán)中執(zhí)行
下面我們來看一段代碼,自己思考一下運(yùn)行結(jié)果會(huì)是什么?

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");

運(yùn)行結(jié)果

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

從結(jié)果可以看出
主進(jìn)程這個(gè)macroTask（也就是1、promise-start和4）執(zhí)行完了，自然會(huì)去執(zhí)行promise then這個(gè)microTask。這是第一個(gè)循環(huán)。之后的setTimeout和promise屬于第二個(gè)循環(huán)。

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

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

這段代碼的運(yùn)行結(jié)果是1,3,2,表示0毫秒間隔運(yùn)行指定的回調(diào)函數(shù)
那么竟然是0秒,為啥3會(huì)是在2前面打印呢

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

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

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

以上是我對于JavaScript 運(yùn)行機(jī)制的一些了解,
知道這些知識,對于我們?nèi)ダ斫鈐s的運(yùn)行機(jī)智,還有對于同步異步的處理會(huì)有很大的幫助,如果您有不同的意見或者文章有錯(cuò)誤的地方,可以給我留言,一起討論,謝謝
參考資料:
JavaScript 運(yùn)行機(jī)制詳解：再談Event Loop