浅显分析浏览器的 EventLoop 机制_浏览器为什么有eventloop-CSDN博客

浏览器中的EventLoop是由主线程、执行栈和队列共同构成。其中执行栈中的代码时提供给主线程调用的，而队列里面的代码是等待放入执行栈中的。将队列中的代码放到执行栈再被主线程执行的过程就是Event Loop。任务执行的过程当然是有先后顺序的，主要分为两种：宏任务、微任务。

宏任务：script(整体代码)、setTimeout、setInterval、I/O、UI 交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境) 简而言之浏览器的api就是宏任务

微任务：Promise.then、 MutationObserver、 process.nextTick(Node.js 环境)简而言之js的api就是微任务

执行的顺序为：

1. 先执行宏任务

2. 在执行的过程中，发现其他宏任务将其他宏任务放到宏任务队列中，发现其他微任务将其他微任务放入微任务队列中，若都不存在跳到步骤3

3. 宏任务执行完毕

4. 检查微任务队列中是否存在微任务，若存在，按顺序执行，直到执行完毕，若不存在跳到步骤5

5. GUI 渲染

6. 回到步骤1 直到宏任务执行完毕

上面五个步骤，构成了一个事件的eventLoop，也就是事件的循环检测机制。

看文字不懂，那么我们举个栗子🌰

console.log(1);
setTimeout(function() {
    console.log(2);
}, 0);
new Promise(function(resolve) {
    console.log(3);
    resolve(Date.now());
}).then(function() {
    console.log(4);
});
console.log(5);
setTimeout(function() {
    new Promise(function(resolve) {
        console.log(6);
        resolve(Date.now());
    }).then(function() {
        console.log(7);
    });
}, 0);

执行步骤如下：