微任务执行时机比宏任务早

为什么微任务比宏任务执行时间早呢？

js是单线程，和DOM渲染共用一个线程

js执行的时候，得留一些时机供DOM渲染

DOM渲染的时机在哪？

同步代码全部执行完，call stack 空闲。

尝试DOM渲染(每次轮询结束之后都会先尝试触发DOM渲染)，DOM结构如果有改变就重新渲染

此时阻断时已经包含添加的3个p标签

微任务：DOM渲染后触发，例如Promise

alert("这是个微任务，此时DOM结构并未渲染")

alert("这是个宏任务，此时DOM结构已经渲染");

从event-loop解释，为何微任务执行更早

执行Promise，会将其放入一个微任务队列

微任务是ES6语法规定的

宏任务是由浏览器规定的

js代码从上往下依次执行

将同步代码放入call stack执行栈里等待执行

将微任务代码放入微任务队列等待时机执行

将宏任务代码放入WebAPIs里面等待时机执行

先将call stack执行栈中的同步代码清空

同步代码执行完成之后执行微任务队列中的微任务

触发event-loop事件循环机制，并且不停循环，监测callBack异步回调队列中是否有宏任务

webAPI等待时机将宏任务推入callback异步回调队列

event-loop检测到并触发回调队列中的宏任务事件，放入执行栈中执行

什么是宏任务和微任务，两者区别

微任务执行时机比宏任务要早

Promise三种状态，如何变化