面试有问到,很长时间没记有点忘记了,记录学习下:
宏任务:setTimeout(web,node) setInterval(web,node) setImmediate(node) requestAnimationFrame(web)
微任务:process.nextTick(node) MutationObserver(web) Promise(node,web)
宏任务与微任务的区别:
为了让浏览器有序的渲染与js执行,一般宏任务执行完就会进行页面渲染,以此循环(Task -> Render)而微任务则是在宏任务执行完后插入的任务,如果没有微任务,那么Promise之类的会被当做宏任务,那么会Task => Render => Promise,而有了微任务的概念之后,那么就可以Tak => Promise => Render,这样可以大大的提高性能。当然要注意的一点是,如果微任务执行中又创建了一个微任务,那么这个微任务会放入队列末然后执行。
从图中可以看出当前Task执行完成后,会立即执行微任务,微任务全部执行完之后,进入下一个loop即事件循环。不过有趣的是,有一些微任务比如Promise,在有些低版本的浏览器当中,会被当作宏任务执行·,当然在这里还是按照标准来,首先先看一个简单的例子:
console.log('start')
setTimeout(() => {
console.log('macro')
},0)
new Promise(resolve => {
console.log('normal')
resolve()
}).then(() => {
console.log('micro')
})
console.log('stop')
输出结果分别是:start normal stop micro macro,只要知道微任务和宏任务这个应该能答对,再稍微改东西:
console.log('start')
new Promise(resolve => {
console.log('normal')
resolve()
})
.then(() => {
setTimeout(() => {
console.log('macro2')
},0)
console.log('micro')
})
.then(() => {
console.log('micro2')
})
setTimeout(() => {
console.log('macro')
},0)
console.log('stop')
结果输出分别是:start normal stop micro micro2 macro macro2,这里的关键点在于微任务中在执行微任务和宏任务,按照事件循环先将macro扔入宏任务,然后执行微任务,然后将micro2扔进当前微任务队列,将macro2扔入宏任务。
其实只要了解微任务和宏任务的机制,这类的问题都很简单,当然平时有可能不关注这点,到了面试的时候就会翻跟头,惨痛的教训..