Event Loop

Event Loop

1. 进程与线程

• js是单线程执行的，那什么是线程呢，说到线程，那么肯定会想到进程，从本质上来说，两个名词都是CPU工作时间片的一个描述
• 进程描述了CPU在运行指令及加载和保存上下文所需的时间，放在应用上来说就代表了一个程序。而线程是进程中的更小单位，描述了执行一段指令所需的时间。

拿浏览器来说，当你打开一个Tab页时就是创建了一个进程，一个进程中可以有多个线程，比如渲染线程，JS引擎线程，HTTP请求线程等等。当你发起一个请求时，其实就是创建了一个线程，当请求结束，该线程可能就会被销毁

• 上文说到了 JS 引擎线程和渲染线程，在JS运行的时候可能会阻止UI渲染，这说明了两个线程是互斥的。这其中的原因是JS可以修改DOM，如果在执行JS的时候UI渲染还在继续，那么就有可能导致不能安全的渲染UI。这其实也是一个单线程的好处，JS是单线程运行的，可以达到节省内存，节约上下文切换时间，没有锁的问题的好处。

2.执行栈

可以把执行栈认为是一个存储函数调用的栈结构，遵循先进后出原则

当开始执行 JS 代码时，首先会执行一个 main 函数，然后执行我们的代码。根据先进后出的原则，后执行的函数会先弹出栈，在图中我们也可以发现， foo 函数后执行，当执行完毕后就从栈中弹出了

当我们使用递归的时候，因为栈可存放的函数是有限制的，一旦存放了过多的函数且没有得到释放的话，就会出现爆栈的问题

function bar() {
	bar();
}
bar();

3.浏览器中的Event Loop

JS是一门非阻塞单线程语言，就是为了与浏览器交互而产生的。

• js在执行的过程中会产生执行环境，这些执行环境会被顺序的加入执行栈中，遇到异步的代码，会被挂起加入到Task（有多种task）队列中，一旦执行栈为空，eventloop就会从Task队列拿出需要执行的代码放入执行栈中执行，所以本质上来说JS中的异步还是同步行为。
  

不同的任务源会被分配到不同的Task队列中，任务源可以分为微任务（microtask）和宏任务（macrotask）。在Es6规范中，微任务被称为jobs，宏任务被称为task

console.log('script start'); 
setTimeout(function() { 
	console.log('setTimeout'); 
}, 0); 
new Promise((resolve) => { 
	console.log('Promise') 
	resolve() 
}).then(function() { 
	console.log('promise1'); 
}).then(function() { 
	console.log('promise2'); 
}); 
console.log('script end'); 
// script start => Promise => script end => promise1 => promise2 => setTimeout

以上代码虽然setTimeout写在Promise之前，但是因为Promise输入微任务而setTimeout属于宏任务，所以promise先执行

微任务

• process.nextTick
• promise
• Object.observe
• MutationObserver

宏任务

• script
• setTimeout
• setInterval
• setImmediate
• I/O
• UI rendering

宏任务中包括了script，浏览器会先执行一个宏任务，接下来有异步代码的话就先执行微任务

所以正确的一次Event Loop顺序是这样的

• 执行同步代码，这属于宏任务
• 执行栈为空，查询是否有微任务需要执行
• 执行所有微任务
• 必要的话渲染UI
• 然后开始下一轮Event Loop，执行宏任务中的异步代码

通过上述的 Event loop 顺序可知，如果宏任务中的异步代码有大量的计算并且需要操作 DOM的话，为了更快的响应界面响应，我们可以把操作 DOM 放入微任务中

4.Node中的Event Loop

• Node中的EventLoop和浏览器中的不相同
• Node的EventLoop分为6个阶段，它们会按照顺序反复运行
  

timer

• timer阶段会执行setTimeout和setInterval
• 一个timer指定的时间并不是准确时间，而是在达到这个时间后尽快执行回调，可能会因为系统正在执行别的事务而延迟

I/O

• I/O阶段会执行处理close事件，定时器和setImmediate的回调

poll

• poll阶段很重要，这一阶段系统会做两件事情
  1. 执行到点的定时器
  2. 执行poll队列中的事件
• 当poll中没有定时器的情况下，会发现以下两件事情
  1. 如果poll队列不为空，会遍历回调队列并同步执行，直到队列为空或者系统限制
  2. 如果poll队列为空：如果有setImmediate需要执行，poll阶段会停止并且进入到check阶段执行setImmediate；如果没有setImmediate需要执行，会等待回调被加入到队列中并立即执行回调，如果有别的定时器需要执行，会回到timer阶段执行回调

check

• check阶段执行setImmediate

close callbacks

• close callbacks阶段执行close事件
• 并且在Node中，有些情况下的定时器执行顺序是随机的

setTimeout(() => {
	console.log('setTimeout');
}, 0);
setImmediate(() => {
	console.log('setImmediate');
}, 0);
// 这里可能会输出 setTimeout， setImmediate
// 可能也会有相反的输出，这取决于性能，因为可能进入eventloop用了不到1毫秒
// 这时候会执行setImmediate
// 否则会执行setTimeout

上面介绍的都是macrotask的执行情况，microtask会在以上每个阶段完成后立即执行

setTimeout(()=>{ 
	console.log('timer1') 
	Promise.resolve().then(function() { 
		console.log('promise1') 
	}) 
}, 0) 
setTimeout(()=>{ 
	console.log('timer2') 
	Promise.resolve().then(function() { 
		console.log('promise2') 
	}) 
}, 0) 
// 以上代码在浏览器和 node 中打印情况是不同的 
// 浏览器中一定打印 timer1, promise1, timer2, promise2 
// node 中可能打印 timer1, timer2, promise1, promise2 
// 也可能打印 timer1, promise1, timer2, promise2

Node 中的 process.nextTick 会先于其他 microtask 执行

setTimeout(() => { 
	console.log('timer1'); 
	Promise.resolve().then(function() { 
		console.log('promise1'); 
	}); 
}, 0); 
process.nextTick(() => { 
	console.log('nextTick'); 
}); 
// nextTick, timer1, promise1

对于microtask来说，它会在以上每个阶段完成前清空microtask队列，下图中的Tick就代表了microtask