js执行机制

1:同步任务和异步任务

js执行机制

同步任务:一个任务必须等待前一个任务执行完成才能执行,是在主线程上执行的。

异步任务:不会直接进入主线程执行,而是进入任务队列,只有在任务队列通知异步任务可以执行时,才会被推入主线程执行。

2:macrotask(宏任务)和microtask(微任务)

macrotask: 包括setTimeout、setInterval和执行栈

microtask: 包括Promise、process.nextTick(process.nextTick指定的异步任务总是发生在所有异步任务之前)

js执行机制

经典面试题:

setTimeout(function() {
  console.log(1)
}, 0);
new Promise(function(resolve, reject) {
  console.log(2);
  resolve()
}).then(function() {
  console.log(3)
});
process.nextTick(function () {
  console.log(4)
})
console.log(5)

主线程开始执行,遇到setTimeout,将setTimeout的回调函数丢到宏任务队列中,在往下执行new Promise立即执行,输出2,then的回调函数丢到微任务队列中,再继续执行,遇到process.nextTick,同样将回调函数扔到为任务队列,再继续执行,输出5,当所有宏任务执行完成后看有没有可以执行的微任务,发现有then函数和nextTick两个微任务,先执行哪个呢?process.nextTick指定的异步任务总是发生在所有异步任务之前,因此先执行process.nextTick输出4然后执行then函数输出3,第一轮执行结束。
第二轮从宏任务队列开始,发现setTimeout回调,输出1执行完毕,因此结果是25431

 

上一篇:Vue.nextTick 的原理和用途


下一篇:vue3.0 nextTick()刷新组件