前端事件循环（Event Loop详解）

什么是事件循环（Event Loop）？

一：首先要明确：js的执行机制

1.从上到下依次执行

2.当某一行代码发生错误时，停止执行下面的代码

3.先执行同步代码，在执行异步代码

二：事件循环的执行过程

1.同步代码先执行：调用栈执行后直接出栈

2.异步代码放入回调队列：等待调用栈空后，进入执行

3.宏任务和微任务都属于异步代码，微任务先执行，宏任务后执行

4.微任务在DOM渲染前执行，宏任务在DOM渲染后执行

三：宏任务和微任务的根本区别

1.常见的宏任务有：setTimeout setInterval ajax DOM事件

2.常见的微任务有：promise async/await

3.微任务的执行时间早于宏任务

4.微任务是由es6语法规定的，宏任务是浏览器规定的

四：事件循环的整体流程

1.执行完call stack调用栈中的同步代码

2.执行微任务队列中的微任务代码

3.尝试DOM渲染

4.触发Event Loop 反复询问callbackQueue回调队列中是否还有需要执行的语句，如果有，则放入call stack调用栈中继续执行

五：经典案例

console.log('start');
setTimeout(() => {
    console.log(333);
}); // 安排明天干的活
Promise.resolve('x').then(() => {
    console.log(3);
}).then(() => {
    console.log(4);
}).then(() => {
    console.log(5); // 小任务无限的加 今天干完否则下不了班
    //nodejs 有小任务限制，跳过直接到宏任务
})
console.log('end');

输入结果：start-->end-->3--->4-->5-->333

分析：

1.start和end属于同步代码优先执行

2.promise里的代码也属于同步代码，但.then里的代码属于异步代码中的微任务，稍后执行

3.setTimeout属于异步代码中的宏任务，最后执行