JS事件循环机制

一、什么是事件循环机制？

//语句一
console.log(1);
//语句二
setTimeout(()=>{
    console.log(2);
},1000);
//语句三
console.log(3);

执行结果为1，3，2

原因是JS引擎指向代码是从上往下执行的，首先会执行语句一。

• JS引擎会将语句一放在调用栈当中，然后执行代码，在控制台输出1，当语句一执行完毕后，便将其从调用栈中移出去。

• 接着语句二进入调用栈，语句二会调用Web API,1秒后进入回调队列，此时JS引擎将语句二移出调用栈，继续执行后面的代码。所以控制台输出了3。

• 此时进入事件循环（EventLoop）,他会不断循环的访问回调队列，等待1秒后Web API会将要执行的语句二放入回调队列；事件循环（EventLoop）将回调队列中的内容放入调用栈，开始执行，然后在控制台输出2。

JS的运行机制就是事件循环。

二、JS的执行顺序

• JS代码是从上到下一行一行执行的
• 如果某一行报错，则停止执行下面的代码
• 先执行同步代码，再执行异步代码

三、事件循环的执行过程

• 同步代码：调用栈执行后直接出栈
• 异步代码：放到Web API中，等待合适的时机放入回调队列，等到栈空时事件循环（EventLoop）开始工作，进行轮询。
• 微任务比宏任务执行时机要早

// 语句一
console.log(1);
// 语句二
setTimeout(()=>{
    console.log(2);
},0);
//语句三
Promise.resolve().then(()=>{
    console.log(3);
})
// 语句四
console.log(4);
//1，4，3，2

• 微任务在DOM渲染前触发，宏任务在DOM渲染后触发

四、微任务和宏任务的根本区别

**宏任务：**由浏览器规定的

1. setTimeout
2. setInterval
3. Ajax
4. DOM事件

**微任务：**由ES6语法规定的

1. Promise
2. async
3. await

五、事件循环的整体过程

1. 先清空调用栈（call stack）中的同步代码
2. 执行微任务队列中的微任务
3. 尝试DOM渲染
4. 触发事件循环（Event Loop）反复询问回调队列中是否有要执行的语句，有则放入调用栈继续执行。

目前的理解：

JS是单线程的，浏览器在执行JS代码时先执行同步代码，再执行异步代码。

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

异步代码：放到Web API中，等待合适的时机放入回调队列，等到栈空时 事件循环（EventLoop）开始工作，进行轮询。

主要过程是：

先清空调用栈（call stack）中的同步代码，执行微任务队列中的微任务，尝试DOM渲染，触发事件循环（Event Loop）反复询问回调队列中是否有要执行的语句，有则放入调用栈继续执行。