微任务与宏任务

先说说JS的执行机制。
JS是一门单线程语言,在执行时是从上到下执行的。
Event Loop(事件循环)是JavaScript的执行机制。

1.同步任务和异步任务
JS的任务可以分为两种。一种是同步任务,一种是异步任务;
同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;
异步任务指的是,不进入主线程、而进入"任务队列"的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

(1)、同步和异步任务分别进入不同的执行"场所",同步的进入主线程,异步的进入Event Table并注册函数。
 (2)、当Event Table中指定的事情完成时,会将这个函数移入Event Queue。
 (3)、主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,进入主线程执行。
 (4)、上述过程会不断重复,也就是常说的Event Loop(事件循环)

2.宏任务和微任务
JS异步有一个执行机制,就是遇到宏任务,先执行宏任务,将宏任务放入eventqueue,然后在执行微任务,将微任务放入eventqueue;这两个queue不是一个queue。当你往外拿的时候先从微任务里拿这个回掉函数,然后再从宏任务的queue上拿宏任务的回掉函数。

宏任务: 包含整个script代码块,setTimeout, setIntval
微任务 :Promise , process.nextTick

为了便于理解,我在这里引入两道例题。
例1:

setTimeout(function() {
    
    
    console.log('4')
})

new Promise(function(resolve) {
    
    
    console.log('1') // 同步任务
    resolve()
}).then(function() {
    
    
    console.log('3')
})
console.log('2')

1。这段代码作为宏任务,进入主线程。
先遇到setTimeout,那么将其回调函数注册后分发到宏任务event queue.
2。接下来遇到Promise, new Promise立即执行,then函数分发到微任务event queue
遇到console.log(), 立即执行
3。整体代码script作为第一个宏任务执行结束, 查看当前有没有可执行的微任务,执行then的回调。(第一轮事件循环结束了,我们开始第二轮循环)
4。从宏任务的event queue开始,我们发现了宏任务event queue中setTimeout对应的回调函数,立即执行。
所以 执行结果: 1-2-3-4

例2:

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() {
    
    
    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')
    })
})

1.整体script作为第一个宏任务进入主线程,遇到console.log(1)输出1
2。遇到setTimeout, 其回调函数被分发到宏任务event queue中。我们暂且记为setTimeout1
3。 遇到process.nextTick(),其回调函数被分发到微任务event queue中,我们记为process1
4。遇到Promise, new Promise直接执行,输出7.then被分发到微任务event queue中,我们记为then1
5。又遇到setTimeout,其回调函数被分发到宏任务event queue中,我们记为setTimeout2.
6。现在开始执行微任务, 我们发现了process1和then1两个微任务,执行process1,输出6,执行then1,输出8, 第一轮事件循环正式结束, 这一轮的结果输出1,7,6,8.那么第二轮事件循环从setTimeout1宏任务开始
7。首先输出2, 接下来遇到了process.nextTick(),统一被分发到微任务event queue,记为process2
8。new Promise立即执行,输出4,then也被分发到微任务event queue中,记为then2
9。现在开始执行微任务,我们发现有process2和then2两个微任务可以执行输出3,5. 第二轮事件循环结束,第二轮输出2,4,3,5. 第三轮事件循环从setTimeout2哄任务开始
10。 直接输出9,跟第二轮事件循环类似,输出9,11,10,12
完整输出是1,7,6,8,2,4,3,5,9,11,10,12

猜你喜欢

转载自blog.csdn.net/qq_45830543/article/details/111567440