JavaScript中的事件循环（event loop）机制

事件循环（event loop）过程：

 

一、执行同步（轮询）阶段：

1.同步代码，一行一行放在Call Stack（调用栈）执行

2.遇到异步，会先记录到Web APIs里，然后等待时机（定时器、网络请求等）

3.时机到了，就移动到Callback Queue（回调队列）

4.当Call Stack（调用栈）清空时，先尝试DOM渲染，再进入事件循环（event loop）阶段

 

二、执行当前的微任务阶段

 

三、DOM渲染阶段

 

四、事件循环（event loop）阶段，执行当前的宏任务：

1.Call Stack（调用栈）为空（即同步代码执行完），微任务执行完，DOM渲染结束，事件循环（event loop）开始工作

2.事件循环（event loop）轮询查找Callback Queue（回调队列），如查找到任务则移动到Call Stack（调用栈）同步执行（轮询）

3.然后继续循环查找，直到查找到任务然后移动到Call Stack（调用栈）同步执行（轮询）

 

五、四个阶段不断循环：

1.每次Call Stack（调用栈）清空（即每次轮询结束，一个同步代码执行阶段就是一个轮询），微任务执行完，都是DOM渲染的时机，DOM结构如有改变则重新渲染，然后触发下一次事件循环（event loop）

2.如果事件循环（event loop）在Callback Queue（回调队列）内查找到任务且移动到Call Stack（调用栈）并同步执行（轮询）完毕，这时Call Stack（调用栈）又清空，又会执行微任务，尝试DOM渲染，然后又进入事件循环（event loop）阶段，执行同步（轮询）、执行微任务、DOM渲染、事件循环（event loop）四个阶段不断循环