javascript的eventloop相關知識

本系列文章是本人學習相關知識時所積累的筆記，以記錄自己的學習歷程，也爲了方便回顧知識；故文章內容較爲隨意簡練，抱着學習目的來的同學務必轉移他處，以免我誤人子弟~

今天看到一段js深拷貝的代碼

// MessageChannel
function structuralClone(obj) {
  return new Promise(resolve => {
    const {port1, port2} = new MessageChannel();
    port2.onmessage = ev => resolve(ev.data);
    port1.postMessage(obj);
  });
}

var obj = {a: 1, b: {
    c: b
}}
// 注意該方法是異步的
// 可以處理 undefined 和循環引用對象
(async () => {
  const clone = await structuralClone(obj)
})()

使用的是我前所未聞的 MessageChannel 對象接口
一搜索發現了 micro task 和 macro task 等概念
在搜索發現了 javascript 的 eventloop
eventloop 倒是經常聽到，今天就來一探究竟。。。

參考資料
MessageChannel是什麼，怎麼使用？
阮一峯：什麼是 Event Loop？
阮一峯：JavaScript 運行機制詳解：再談Event Loop
Javascript 基礎夯實——理解 Event Loop、Micro Task & Macro Task

eventloop 實現了 javascript 的異步模式

主任務（同步代碼） ——> micro task（Promise） ——> 渲染視圖 ——> macro task（setTimeout）