js事件循环机制（Event Loop）浏览器端学习总结

js是单线程的语言，但是在实际的运行中存在着同步任务和异步任务。在运行过程中，在js引擎执行js的过程中，如果遇到异步任务的时候，就交给事件处理线程（Web APIs），由事件处理线程根据其性质分别放入不同的任务队列中。

js的任务分为Macro Task（宏任务）Micro Task（微任务），

macrotask包括：script（整体代码片段）、setTimeout、setInterval、I/O、UI交互、setImmediate(Node.js 环境)

microtask包括：Promise、MutaionObserver、process.nextTick(Node.js 环境)

当主线程运行完一个宏任务后，会循环微任务队列并执行，之后判断微任务队列是否为空，如果不为空继续执行，如果为空则去访问宏任务队列继续执行下一个宏任务。直到两个队列都清空。

事例：

async function async1() { 
    console.log('async1 start') 
    await async2() 
    console.log('async1 end')
}

async function async2() {
    console.log('async2')
}

console.log('script start')

setTimeout(function() {
    console.log('setTimeout')
}, 0) 

async1()

new Promise(function(resolve) { 
    console.log('promise1') 
    resolve()
}).then(function() {
    console.log('promise2')
})

console.log('script end') 

结果：script start;  async1 start;  async2;  promise1;  script end;  async1 end;  promise2;  setTimeout; 

（注：await会阻塞后面代码的执行，用一个匿名函数包裹await语句之后的代码作为一个微任务事件）

参考：

前端开发都应该懂的事件循环（event loop）以及异步执行顺序（setTimeout、promise和async/await）

深入理解JavaScript事件循环机制 - ChessZhang - 博客园

深入理解js事件循环机制（浏览器篇） - lynnelv's blog