消息队列、宏任务、微任务

页面能进行交互、网络请求等操作，这些都会产生一个相应的任务，这些任务放在了消息队列当中，消息队列是前出后进的形式，渲染主线程会从中一个一个获取并执行任务。任务的数量会有很多，但是负责执行任务的线程只有一个，怎样协调这些任务的执行顺序，好让页面功能不被阻塞，页面的操作又能流畅呢？于是有了宏任务和微任务，通常把消息队列中的任务称为宏任务，每个宏任务中都包含一个微任务队列，在执行宏任务的过程中，如果DOM有变化，那么就会把该变化添加到微任务列表中，这样就不会影响到任务的执行效率问题。等宏任务的主要功能都执行完毕了，渲染引擎会先去执行宏任务中的微任务，这样就解决了实时性问题。另外，没执行完一个任务时，都会检查退出标识，如果设置了退出，则会退出线程循环。
定时器任务比较特殊，主线程执行定时器任务的时候，会生成一个回调任务，这个回调任务包含了回调函数、开始计时时间、当前时间等内容，然后把这个回调任务放在延迟队列中，延迟队列中的任务会在当前从消息队列中取出的任务执行完后执行，所以定时器任务可能会比预设延时更久一些，因为要等待从消息队列中取出的任务完成才行。注意不是消息队列中的全部任务，而是当前执行的某个任务。而且嵌套的定时器任务，最小延时时间为4ms，就算设置0，最终也会变成4ms，在未激活的页面中，定时器最小延时时间为1000ms。
宏任务包括 渲染事件、用户交互事件、JS脚本执行事件、网络请求事件。
事件循环机制的定义，宏任务的执行过程：先从多个消息队列中选出一个最老的任务，这个任务称为oldestTask；然后循环系统记录任务开始执行事件，并把这个oldestTask设置为当前正在执行的任务；当任务执行完成之后，删除当前正在执行的任务，并从对应的消息队列中删除这个oldestTask；最后统计执行完成的时长等信息。
宏任务是一些时间精度要求没那么高的任务。涉及到时间精度要求比较高的需求，就需要作为微任务来处理了。
异步回调有两种方式：一种是把异步函数封装成一个宏任务，添加到消息队列尾部，当循环系统执行到该任务时执行回调函数，像是setTimeout就是， 先是把回调函数还有一些信息封装成一个任务然后放在延时队列中，然后延时队列会计算时间然后看哪个任务到期了，就执行哪个。
第二种是在主函数执行结束之后、当前宏任务执行结束之前执行回调函数，这通常都是以微任务形式体现的。
微任务就是一个需要异步执行的函数，执行时机就是主函数执行结束后、当前宏任务结束之前。
产生微任务的方式有两种，一种是MutationObserver监控某个DOM节点，然后通过JS修改节点让DOM节点发生变化，就会产生DOM变化记录的微任务
第二种方式是使用Promise，当调用Promise.resolve()或者Promise.reject()的时候， 也会产生微任务，JS能做的也只是让微任务产生，但是没法做到控制微任务列表。
微任务队列是何时被执行的。通常情况下，当前宏任务的Javascript快执行完成的时候，也就是JS引擎准备退出全局执行上下文并清空调用栈的时候，JS引擎会检查全局执行上下文中的微任务队列，然后按照顺序执行队列中的微任务。准备退出全局执行上下文的这个时间点被称为检查点。此外还有其他检查点。执行微任务的过程中，如果产生了微任务，会直接往当前微任务列表的后面排任务，不会放在下一个宏任务关联的微任务列表里面。
最初的DOM监听方式是Mutaion Event，DOM发生变化的时候会调用JavaScript接口，这样虽然解决了实时性问题，但是性能开销比较大，容易造成卡顿。后来又使用Mutation Observer，类似加了个防抖功能，多次DOM变化后，一次触发响应函数，响应函数也改为了异步调用，异步调用解决性能问题，响应函数打包成任务放入微任务列表，解决了实时性问题。