eventloop运行顺序

270 阅读1分钟

1、一段简单代码的运行顺序

	<script type="text/javascript">
		console.log('script start')
		setTimeout(()=>{
			console.log('settimeout')
		},0)
		Promise.resolve().then(function() {
		  console.log('promise');
		});
		console.log('script end')
	</script>

运行顺序: script start -> script end -> promise -> settimeout

  1. 首先执行script宏任务
  2. 执行同步任务script start->script end
  3. 执行微任务promise
  4. 执行settimeout宏任务

2、浏览器完整的Event Loop segmentfault.com/a/119000001…

  1. 执行全局Script同步代码,这些同步代码有一些是同步语句,有一些是异步语句(比如setTimeout等);
  2. 全局Script代码执行完毕后,调用栈Stack会清空;
  3. 从微队列microtask queue中取出位于队首的回调任务,放入调用栈Stack中执行,执行完后microtask queue长度减1;
  4. 继续取出位于队首的任务,放入调用栈Stack中执行,以此类推,直到直到把microtask queue中的所有任务都执行完毕。注意,如果在执行microtask的过程中,又产生了microtask,那么会加入到队列的末尾,也会在这个周期被调用执行
  5. microtask queue中的所有任务都执行完毕,此时microtask queue为空队列,调用栈Stack也为空;
  6. 取出宏队列macrotask queue中位于队首的任务,放入Stack中执行;
  7. 执行完毕后,调用栈Stack为空;
  8. 重复第3-7个步骤;
  9. 重复第3-7个步骤;
  10. ......

从整体来看event loop

www.ruanyifeng.com/blog/2013/1…

Event Loop的一些基础概念

juejin.cn/post/684490…

参考

segmentfault.com/a/119000001…