事件循環(huán)

imingyu 發(fā)布于2019-08-23 15:43 / 1981人閱讀

摘要：所以一切版的多線程都是用單線程模擬出來的，一切多線程都是紙老虎事件循環(huán)既然是單線程，那就像只有一個窗口的銀行，客戶需要排隊一個一個辦理業(yè)務(wù)，同理任務(wù)也要一個一個順序執(zhí)行。

1、關(guān)于javascript
javascript是一門單線程語言，在最新的HTML5中提出了Web-Worker，但javascript是單線程這一核心仍未改變。所以一切javascript版的"多線程"都是用單線程模擬出來的，一切javascript多線程都是紙老虎！
2、javascript事件循環(huán)
既然js是單線程，那就像只有一個窗口的銀行，客戶需要排隊一個一個辦理業(yè)務(wù)，同理js任務(wù)也要一個一個順序執(zhí)行。如果一個任務(wù)耗時過長，那么后一個任務(wù)也必須等著。那么問題來了，假如我們想瀏覽新聞，但是新聞包含的超清圖片加載很慢，難道我們的網(wǎng)頁要一直卡著直到圖片完全顯示出來？因此聰明的程序員將任務(wù)分為兩類：

JS分為同步任務(wù)和異步任務(wù)
同步任務(wù)都在主線程上執(zhí)行，形成一個執(zhí)行棧
主線程之外，事件觸發(fā)線程管理著一個任務(wù)隊列，只要異步任務(wù)有了運行結(jié)果，就在任務(wù)隊列之中放置一個事件。
一旦執(zhí)行棧中的所有同步任務(wù)執(zhí)行完畢（此時JS引擎空閑），系統(tǒng)就會讀取任務(wù)隊列，將可運行的異步任務(wù)添加到可執(zhí)行棧中，開始執(zhí)行

事件循環(huán)是通過任務(wù)隊列的機制來進行協(xié)調(diào)的。一個 Event Loop 中，可以有一個或者多個任務(wù)隊列(task queue)，一個任務(wù)隊列便是一系列有序任務(wù)(task)的集合；每個任務(wù)都有一個任務(wù)源(task source)，源自同一個任務(wù)源的 task 必須放到同一個任務(wù)隊列，從不同源來的則被添加到不同隊列。 setTimeout/Promise 等API便是任務(wù)源，而進入任務(wù)隊列的是他們指定的具體執(zhí)行任務(wù)。

宏任務(wù):

macro)task（又稱之為宏任務(wù)），可以理解是每次執(zhí)行棧執(zhí)行的代碼就是一個宏任務(wù)（包括每次從事件隊列中獲取一個事件回調(diào)并放到執(zhí)行棧中執(zhí)行）。

瀏覽器為了能夠使得JS內(nèi)部(macro)task與DOM任務(wù)能夠有序的執(zhí)行，會在一個(macro)task執(zhí)行結(jié)束后，在下一個(macro)task 執(zhí)行開始前，對頁面進行重新渲染，流程如下：
(macro)task->渲染->(macro)task->...
(macro)task主要包含：script(整體代碼)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 環(huán)境)

微任務(wù):

microtask（又稱為微任務(wù)），可以理解是在當前 task 執(zhí)行結(jié)束后立即執(zhí)行的任務(wù)。也就是說，在當前task任務(wù)后，下一個task之前，在渲染之前。

所以它的響應速度相比setTimeout（setTimeout是task）會更快，因為無需等渲染。也就是說，在某一個macrotask執(zhí)行完后，就會將在它執(zhí)行期間產(chǎn)生的所有microtask都執(zhí)行完畢（在渲染前）。

microtask主要包含：Promise.then、MutaionObserver、process.nextTick(Node.js 環(huán)境)

運行機制:

在事件循環(huán)中，每進行一次循環(huán)操作稱為 tick，每一次 tick 的任務(wù)處理模型是比較復雜的，但關(guān)鍵步驟如下：

執(zhí)行一個宏任務(wù)（棧中沒有就從事件隊列中獲?。?執(zhí)行過程中如果遇到微任務(wù)，就將它添加到微任務(wù)的任務(wù)隊列中
宏任務(wù)執(zhí)行完畢后，立即執(zhí)行當前微任務(wù)隊列中的所有微任務(wù)（依次執(zhí)行）
當前宏任務(wù)執(zhí)行完畢，開始檢查渲染，然后GUI線程接管渲染
渲染完畢后，JS線程繼續(xù)接管，開始下一個宏任務(wù)（從事件隊列中獲?。?/pre>
流程圖如下：

兩道題 讓你全部理解事件循環(huán)
console.log("1")
  setTimeout(function() {
    console.log("2")
    process.nextTick(function() {
      console.log("3")
    })
    new Promise(function(resolve) {
      console.log("4")
      resolve()
    }).then(function() {
      console.log("5")
    })
  })
  process.nextTick(function() {
    console.log("6")
  })
  new Promise(function(resolve) {
    console.log("7")
    resolve()
  }).then(function() {
    console.log("8")
  })
  setTimeout(function() {
    console.log("9")
    process.nextTick(function() {
      console.log("10")
    })
    new Promise(function(resolve) {
      console.log("11")
      resolve()
    }).then(function() {
      console.log("12")
    })
  })
  
  第二題
async function async1() {
    console.log("async1 start");
    await async2();
    console.log("async1 end");
}
async function async2() {
    console.log("async2");
}
console.log("script start");
setTimeout(function() {
    console.log("setTimeout");
}, 0)
async1();
new Promise(function(resolve) {
    console.log("promise1");
    resolve();
}).then(function() {
    console.log("promise2");
});
console.log("script end");

注意：
async function async1() {                        
    console.log("async1 start");
    await async2();                   
    console.log("async1 end");
}
等同于
async function async1() {
    console.log("async1 start");
    Promise.resolve(async2()).then(() => {
            console.log("async1 end");
    })
}