一、消息队列&事件循环

1.1 理解事件循环&&消息队列

一个能满足复杂情况的线程需要拥有以下特性：

  • 需要执行所有的任务 —> 渲染主线程
  • 运行过程中，接收并执行新任务 —> 事件循环机制
    • 线程循环执行，监听是否有新的任务
  • 处理其他线程发送的任务 —> 消息队列
    • 添加消息队列，其他线程中产生的新任务添加至消息队列尾部，主线程循环地在消息队列中读取、执行任务
  • 任务安全退出主线程 —> 退出标志变量
    • 在确定退出前，设置一个退出标志。在执行完任务后，判断是否有设置退出标志

1.2 单线程缺点

  • 无法处理高优先级任务

    如果执行任务的过程中，dom变换非常频繁，如果这些dom变化都直接调用js接口，就会造成执行时间被拉长，执行效率低下

解决方案：创建微任务；
消息队列中的任务称为宏任务，每个宏任务中都包含一个微任务；
在执行宏任务过程中，如果有dom发成变化，这些变化就会被添加到微任务列表中；当前宏任务执行完毕后，先去执行当前宏任务中的微任务，再执行下一个宏任务

  • 单个任务执行时长过久

单任务中，单一任务执行时间过久，下一个任务就要等待很长时间，最终造成页面卡顿

解决方案：使用js回调