Microtask与Macrotask,异步执行顺序的差异
要明白这个问题需要去了解js的事件循环模型。了解过程中会明白js的执行栈,作用域链,变量提升,js的单线程原因等许多问题。
关键词:marcotask microtask queue 执行上下文context 堆heap 栈stack 作用域
写的很简单,主要是思路,细节google就可以。
参考
引入
一个代码执行顺序的例子:
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {
console.log('promise1');
}).then(function() {
console.log('promise2');
});
console.log('script end');
//script start
//script end
//promise1
//promise2
//undefined
//setTimeout
这里顺序的判断就涉及到了宏任务,微任务。
event loop
JS是单线程的语言,同步执行代码会造成阻塞,异步解决了这一问题。但是异步是如何实现的?
事件循环模型,event loop实现异步。
而在浏览器环境与NodeJs环境又有差异,NodeJs里的event loop更复杂一些,这里主要说明浏览器环境中的event loop,但是具体到不同浏览器上代码的执行顺序也有差异。
- 总体上来讲,setTimeout,setTimeInterval粒度更大,属于宏任务,promise.then中的回调粒度小,是微任务。
- setTimeout,在0ms后将callback加入到宏任务的queue中,而promise的回调放在微任务的queue中
- 当前JS线程中的任务执行完成后(正常代码都会放入执行栈中,执行栈中空闲后),queue中的函数会按队列执行。先去微任务的queue,再去执行宏任务队列中的callback。