宏任务与微任务

JS运行机制

概念1：JS是单线程执行，该单线程是指JS引擎线程

在浏览器环境中，有JS 引擎线程和渲染线程，且两个线程互斥。
Node环境中，只有JS 线程。

概念2：宿主

JS运行的环境。一般为浏览器或者Node。所以一般也叫宿主环境

概念3：执行栈

是一个储存函数调用的栈结构，遵循先进后出的原则

概念4：Event Loop

首先要了解队列、栈的概念

队列（Queue）

队列是一种FIFO（First In,First Out）的数据结构，它的特点就是先进先出
eg.类似于排队

栈（Stack）

栈是一个LIFO（Last In,First Out）的数据结构，特点是后进先出
eg.类似于桶装薯片盒

调用栈（Call Stack）

本质上是一个栈，但是里面装的是一个个待执行的函数。
Event Loop会一直检查Call Stack中是否有函数需要执行，如果有，就从栈顶依次执行。同时，如果执行过程中发现其他函数，继续入栈然后执行。
如两个函数：
栈空 =》 执行到一个函数A，函数A入栈 =》 函数A又调用了函数B，函数B入栈 =》 函数B执行完后出栈 =》 然后继续执行函数A，执行完后A也出栈 =》 栈空

调用栈大家会经常见到，控制台报错的时候，错误信息显示的就是当前时刻调用栈的状态

调用栈是用于同步代码，假如现在发起了一个网络请求（request）或者设置了一个定时器延迟(setTimeOut)一段时间后的代码（回调函数）并不是加到调用栈，这时候就需要引入**（事件表格）Event Table** 与**（事件队列） Event Queue**了

Event Table

Event Table 可以理解为一张 事件=》回调函数 对应表；它是用来储存js中异步事件（request,setTimeOUt,Io等）及其对应的回调函数列表

Event Queue
Event Queue简单理解就是 回调函数 队列，所以也叫CallBack Queue
!!!当Event Table中的事件被触发，事件对应的回调函数就会被push进这个Event Queue，然后等待被执行

了解上述概念之后，就可以来认识Event Loop了

1.开始，先进入Call Stack
2.同步任务在栈中等待被执行，异步任务从Call Stack移入Event Table中注册
3.当对应的事件触发（或延迟到指定时间），Event Table会将事件回调函数移入Event Queue中等待！！
4.当Call Stack中没有任务，就从Event Queue中拿出一个任务放入Call Stack

而Event Loop就是指这个循环!它不停检查Call Stack中是否有任务（也叫栈帧）需要执行，如果没有，就检查Event Queue，从中弹出一个任务，放入Call Stack中，如此循环！

概念5：宏任务和微任务

ES6规范中，microtask称为jobs（微任务）,macrotask称为task（宏任务）；宏任务是由宿主发起的，而微任务由JavaScript自身发起。

在ES3以及以前的版本中，JavaScript本身没有发起异步请求的能力，也就没有微任务的存在。在ES5之后，JavaScript引入了Promise，这样，不需要浏览器，JavaScript引擎自身也能够发起异步任务了。

然后，从宏任务与微任务的角度理解Event Table的话：

JS引擎常驻于内存中，等待宿主将JS代码或函数传递给它。
也就是等待宿主环境分配宏观任务，反复等待 - 执行即为事件循环。

Event Loop中，**每一次循环称为tick，**每一次tick的任务如下：

1.执行栈选择最先进入队列的宏任务（一般都是script），执行其同步代码直至结束；
2.检查是否存在微任务，有则会执行至微任务队列为空；
3.如果宿主为浏览器，可能会渲染页面；
4.开始下一轮tick，执行宏任务中的异步代码（setTimeout等回调）。

引用1：https://www.sohu.com/a/333554883_283613
引用2：https://www.jianshu.com/p/bfc3e319a96b