event loop 机制

描述event loop 机制

JavaScript是如何执行的?

  1. 自上而下,从左到右一行一行执行
  2. 如果有一行报错,后面的代码不执行
  3. 先执行同步代码,再执行异步代码 (setTimeout、Ajax)

Event Loop 过程

  1. 同步代码,一行一行放在 Call stack 中执行
  2. 遇到异步,会先“记录”下,等待执行时机 (setTimeout、Aiax) 。时机到了,将之前“记录”的代码放入Callback Queue
  3. 当 Call Stack 为空(同步代码执行完),Event Loop 开始工作
  4. Event Loop 轮询查找 Callback Queue 中是否有可执行的代码。如果有,将代码移动到 Call Stack 中执行
  5. Event Loop 如果没有找到可以执行代码,则会继续轮询查找

什么是宏任务?什么是微任务?二者有什么区别?

微任务:Promise 、async await

宏任务:setTimeout 、setInterval 、Ajax 、DOM 事件

区别:都是异步;执行顺序:先同步 -> 执行微任务 -> 渲染DOM树 -> 执行宏任务