分享一下自己的 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 下面的都作为回调内容, 都是微任务
