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

所以严格意义上来讲，javascript 不是单线程的？？？

eventloop 实现了 javascript 的异步模式

主任务（同步代码） ——> micro task（Promise） ——> 渲染视图 ——> macro task（setTimeout）