Event Loop(事件循环, 事件轮询)

分享一下自己的 Event Loop(事件循环, 事件轮询) 学习笔记

自己理解画的图

详细图解

• Event Loop 的 过程
  • 同步代码, 一行一行放在 Call Stack (调用栈)中执行
  • 遇到异步, 会先 "记录" 下, 等待时机(定时, 网络请求等)
  • 时机到了, 就移动到 Callback Queue
  • 如果 Call Stack 为空 (即同步代码执行完), Event Loop 开始工作
  • 轮询查找 Callback Queue, 如有则移动到 Call Stack 执行
  • 然后继续轮询查找(永动机一样)
• DOM 事件和 Event Loop
  • JS 是单线程的
  • 异步(setTimeout, ajax 等)使用回调, 基于 Event Loop
  • DOM 事件也使用回调, 也基于 Event Loop
• 宏任务macroTask 和 微任务microTask (两者的根本区别: 微任务是 ES6 语法规定的, 宏任务是由浏览器规定的)
  • 宏任务: setTimeout, setInterval, Ajax , DOM 事件
  • 微任务: Promise, async/await
  • 微任务执行时机比宏任务要早
    • 宏任务在 DOM 渲染后触发, 如 setTimeout
    • 微任务在 DOM 渲染前触发, 如 Promise
• Event Loop 和 DOM 渲染
  • 在同步任务执行完的前提下, 每次 Call Back 清空(即每次轮询结束), 都是 DOM 重新渲染的机会, DOM 结构如有改变则重新渲染, 然后再去触发下一次 Event Loop
  • 执行顺序:
    • 同步任务执行完成后, Call Stack 清空
    • 执行当前的微任务
    • 尝试DOM 渲染
    • 触发 Event Loop
      注: await 下面的都作为回调内容, 都是微任务