同步任务:执行主线程上排队执行的任务,只有前一个任务执行完毕,下一个任务才会开始执行
异步任务:不进入主线程,而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行
事件循环(Event Loop):主线程从"任务队列"中读取事件这个过程是循环不断的。
- 同步任务在主线程中执行,形成“执行栈”
- 另外还有一个异步任务队列,异步任务有了结果后,在异步任务队列放一个事件,等待执行
- 同步任务和异步任务进入不同的执行场所,同步任务进入执行栈,异步任务进入eventTable并注册事件
- 异步任务有了结果后,将事件推入异步任务队列
- 所有的同步任务执行完后,去异步任务队列上读取可执行的异步任务,如果有就推入主线程执行
- 主线程不断重复上面的步骤
异步任务又分为宏任务、微任务
宏任务:script, setTimeout,setInterval
微任务:Promise.then(),process.nextTick()
在执行一轮任务的时候,遇到宏任务会将宏任务放到宏任务队列,遇到微任务会将微任务放到微任务队列,同步任务执行完毕后执行微任务,等所有微任务执行完毕后,再执行下一轮宏任务。
const promise = new Promise((resolve,reject)=>{
console.log(1);
resolve();
console.log(2);
reject()
})
setTimeout(() => {
console.log(5)
},0)
promise.then(() => {
console.log(3)
}).then(()=>{
console.log(6)
}).catch(()=>{
console.log(7)
})
console.log(4)
执行结果:1,2,4,3,6,5
console.log(1);
new Promise(resolve => {
resolve();
console.log(2);
}).then(() => {
console.log(3);
})
setTimeout(() => {
console.log(4);
}, 0);
console.log(5);
执行结果:1,2,5,3,4
setTimeout(function() {
console.log(1);
}, 0);
console.log(2);
async function s1() {
console.log(7)
await s2();
console.log(8);
}
async function s2() {
console.log(9);
}
s1();
new Promise((resolve, reject) => {
console.log(3);
resolve();
console.log(6);
}).then(() => console.log(4))
console.log(5);
执行结果:2,7,9,3,6,5,8,4,1
function a() {
console.log(1)
Promise.resolve().then(function(){
console.log(2)
})
}
setTimeout(function(){
console.log(3)
}, 0)
Promise.resolve().then(a)
console.log(5)
执行结果:5,1,2,3
参考:
阮一峰JavaScript 运行机制详解:再谈Event Loop http://www.ruanyifeng.com/blog/2014/10/event-loop.html
彻底搞懂 JavaScript 执行机制 https://zhuanlan.zhihu.com/p/379475079