循环系统的演变：

    1. 单线程处理安排好的任务

    image.png
    缺点： 如果有新任务，就凉了
    为此进行升级

    1. 线程运行中，能接收并执行新任务（事件循环机制）

    对比上一个版本进行了如下升级

    • 引入了循环机制
    • 引入了事件机制

    image.png
    当然如果任务特别多我们让线程一下子全部运行

    • 引入了消息队列

    image.png

    这要就是事件循环系统
    我们做了什么改造呢？

    1. 添加消息队列
    2. IO线程中产生的新任务添加到消息队列尾部
    3. 渲染主线程从消息队列中取出任务，并且执行任务

    但是还是有一些问题-渲染主线程是单线程，这样会产生一些问题？
    问题1： 如何处理高优先级的任务？

    问题2： 如何解决单任务执行事件过长问题？

    • 引入了微任务和宏任务概念

    微任务就是一个需要异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束
    之前

    微任务和宏任务是绑定的，每个宏任务在执行时，会创建自己的微任务队列

    所以也就是说当前宏任务执行完毕后，并不是马上从消息队列中拿下一个宏任务执行，而是先看当前宏任务中绑定的微任务队列是不是又任务需要执行，优先执行微任务队列任务，没有了。再去执行下下一个宏任务。

    最后介绍下产生宏任务和微任务的方法：

    宏任务：

    1. 渲染事件
    2. 用户交互事件
    3. js执行事件
    4. 网络请求完成和文件读写完成

    微任务：

    1. MutationObserver
    2. Promise
    3. …