JS事件循环机制（Event loop 执行顺序）

参考博文

博文1
博文2
练习1
练习2

为什么有事件循环

js是运行于浏览器的脚本语言，因其经常涉及操作dom，如果是多线程的，如果一个线程修改dom，另一个线程删除dom，那么浏览器就不知道该先执行哪个操作，所以js执行的时候会按照一个任务一个任务来执行，那么任务是怎么排列的呢
JS任务分为同步任务和异步任务。试想一下，如果js的任务都是同步的，那么遇到定时器、网络请求等这类型需要延时执行回调函数的任务会发生什么？页面会像瘫痪一下暂停下来等待这些需要需要时间的代码执行完毕，基于此，又引入了异步任务。异步任务分为宏任务和微任务。

• 同步任务：同步任务不需要进行等待可立即看到执行结果，比如console
• 异步任务：异步任务需要等待一定的时候才能看到结果，比如setTimeout、网络请求

为什么异步任务的事件中要区分宏任务和微任务

假设如果异步任务的回调是在操作dom，但是页面渲染也是一个任务，如果把dom渲染的任务排到异步任务的队尾，那么页面同样会出现瘫痪，所以js就规定一些可以插队完成的任务，这类型的任务称为微任务，比如说dom渲染，后面又引入promise.then。
在JS中宏任务队列只有一个，而每一个宏任务都有一个自己的微任务队列，每轮循环都是由一个宏任务+多个微任务组成。微任务是在执行宏任务的过程中产生的，因此每一个宏任务都对应着一个微任务队列。微任务队列可为空，即该宏任务执行过程中没有产生微任务。

宏任务和微任务有哪些，他们之间的优先级是什么

常见的宏任务有：
script（整体代码）
setTimout
setInterval
setImmediate(node 独有)
requestAnimationFrame(浏览器独有)
IO/UI render（浏览器独有）
网络请求
new Promise(xxx)中xxx是同步代码
常见的微任务有：
process.nextTick(node 独有)
Promise.then()
Object.observe
MutationObserver
async
应注意的：
1、new Promise(xxx)中xxx是立即执行的（示例1）
2、在async/await中，在出现await出现之前，其中的代码也是立即执行的，
await XXX;中的 XXX 也是立即执行的，await XXX;之后的语句会被添加到微任务队列中。（示例1）
3、微任务队列中 process.nextTick的优先级最高（示例1）
4、宏任务队列中 setTimeout 比 setImmediate 优先级更高（示例2）
5、宏任务队列中 setTimeout 的执行优先级与其设置的时间有关（示例3）
6、宏任务队列中,若设置时间都为默认时间，则优先级顺序为：
setTimeout/setInterval > IO/UI render（浏览器独有）> setImmediate(node 独有)

JS的执行顺序如何描述