解读前端面试 EventLoop事件循环机制

前言

EventLoop 是计算机系统的一种运行机制。JavaScript语言就采用这种机制，它是一种单线程语言，所有任务都在一个线程上完成，一旦遇到大量任务或者遇到一个耗时的任务，网页就会出现"假死"，因为JavaScript停不下来，也就无法响应用户的行为。为了解决这个问题JS中出现了同步任务和异步任务。

简单来说：eventloop事件循环机制 是指浏览器或Node运行环境里解决javaScript单线程运行时不会阻塞的一种机制，也是我们经常在项目里使用异步 promise / async await 的原因。

什么是 同步任务 / 异步任务

Javascript单线程任务被分为 同步任务（synchronous） 和 异步任务（asynchronous）。同步任务 会在调用栈中按照顺序等待主线程依次执行。异步任务 会在异步任务有了结果后，将注册的回调函数放入任务队列中等待主线程空闲的时候（调用栈被清空），被读取到栈内等待主线程的执行。

异步任务分为 宏任务 和 微任务
微任务和宏任务它们都属于一个队列，主要区别在于他们的执行顺序 ( 同步任务 -> 微任务 -> 宏任务)

异步任务的运行机制

1.所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
2.主线程之外，还存在一个"任务队列"（task queue）。遇到异步任务，就在"任务队列"之中放置一个异步事件。
3.一旦"执行栈"中的所有同步任务执行完毕，就会读取"任务队列"中的事件对应的异步任务，进入执行栈，开始执行。
4.主线程不断重复上面的第三步。

宏任务和微任务

宏任务（macrotask）：
异步Ajax请求
setTimeout 、setInterval、setImmediate、requestAnimationframe
其他宏任务

微任务（microtask）：
Promise.then、Promise.catch、Promise.finally
process.nextTick
其他微任务

宏任务

method	浏览器	Node
setTimeout	✅	✅
setInterval	✅	✅
setImmediate	❌	✅
requestAnimationframe	✅	❌

微任务

method	浏览器	Node
process.nextTick	❌	✅
MutationObserver	✅	❌
Promise.then、Promise.catch、Promise.finally	✅	❌

练习

setTimeout(() => {  // ①                  
	console.log("1-1");
	Promise.resolve().then(() => {
		console.log("2-1");
	});
});
console.log("1-2"); 
Promise.resolve().then(() => {
    console.log("1-3");
	setTimeout(() => {  // ②
		console.log("3-1");
	});
});

// 运行结果
 // 1-2    ①整体被放入宏任务队列中，执行同步任务log 打印 1-2
 // 1-3    .then同步任务 打印 1-3 ，② 放到宏任务队列中，同步任务执行结束，执行栈清空，读取执行异步任务
 // 1-1	   执行①中的同步任务，打印 1-1    
 // 2-1    .then同步任务 打印 2-1
 // 3-1    执行②中的同步任务 打印 3-1

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('Promise')
    resolve()
}).then(function(){
    console.log('Promise2')
})

console.log('script end')

// 运行结果：
// script start  打印log值
// async1 start  执行async1函数，打印log值 
// async2        await 执行async2 打印log值 await后面的代码被压入microtask队列。当主线程执行完毕，取出这个回调，执行。 所以先不打印 async1 end，去先执行async函数之后的代码。
// Promise       new Promise回调函数是同步执行的, 创建 promise 对象后立即执行，打印log
// script end    同步代码log，到此主线程执行完毕。
// async1 end    await后的代码第三步时被放入了回调，回调被执行
// Promise2      执行 .then回调（微任务队列）
// setTimeout    执行 setTimeout（宏任务队列）