参考一:并发模型与事件循环
参考二:这一次,彻底弄懂JS执行机制
1.堆、栈、队列
堆Heap:存放引用类型
栈Stack:后进先出
,执行同步
任务
队列Queue:先进先出
,存放异步
任务
2.事件循环
js是单线程的,但是执行时会分为同步
和异步
任务
在任务入执行栈时,会将异步任务推入任务队列
,同步任务放入主线程中执行,待主线程空了之后再回头去按顺序执行任务队列里的异步任务,如此循环
3.宏任务和微任务
除了同步和异步任务,还可以更精细化可分为宏任务
和微任务
,常见的宏任务和微任务如下:
宏任务:
普通同步任务,setTimeout,setInterval,new promise,异步ajax请求
微任务:
promise.then.catch.finally,process.nextTick(仅在node中,且在微任务中享有优先执行权)
队列里面有宏任务和微任务,浏览器每次事件循环都会执行一个宏任务,和该宏任务下的所有微任务。遇到定时器等异步会放到异步队列执行,然后再将结果放到任务队列。这样一直运行,只到执行栈为空和队列为空
console.log('1');
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
process.nextTick(function() { // web环境下忽略process.nextTick
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
setTimeout(function() {
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})
// node环境: 1 7 6 8 2 4 9 11 3 10 5 12
// 浏览器环境: 1 7 8 2 4 5 9 11 12 process.nextTick仅在node环境有,这里忽略