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
- 首先执行script宏任务
- 执行同步任务script start->script end
- 执行微任务promise
- 执行settimeout宏任务
2、浏览器完整的Event Loop segmentfault.com/a/119000001…
- 执行全局Script同步代码,这些同步代码有一些是同步语句,有一些是异步语句(比如setTimeout等);
- 全局Script代码执行完毕后,调用栈Stack会清空;
- 从微队列microtask queue中取出位于队首的回调任务,放入调用栈Stack中执行,执行完后microtask queue长度减1;
- 继续取出位于队首的任务,放入调用栈Stack中执行,以此类推,直到直到把microtask queue中的所有任务都执行完毕。注意,如果在执行microtask的过程中,又产生了microtask,那么会加入到队列的末尾,也会在这个周期被调用执行;
- microtask queue中的所有任务都执行完毕,此时microtask queue为空队列,调用栈Stack也为空;
- 取出宏队列macrotask queue中位于队首的任务,放入Stack中执行;
- 执行完毕后,调用栈Stack为空;
- 重复第3-7个步骤;
- 重复第3-7个步骤;
- ......
从整体来看event loop
www.ruanyifeng.com/blog/2013/1…
Event Loop的一些基础概念
参考