开端
在Vue
中有一个nextTick
方法,偶然一天,我发现不管代码的顺序如何,nextTick
总是要比setTimeout
先要执行。同样是排队,凭什么你nextTick
就要比我快?
开局一道题,内容全靠编。(在node下运行,答案在文末给出。)
-
new
Promise(
(resolve) => {
-
console.log(
1);
-
-
process.nextTick(
() => {
-
console.log(
2);
-
});
-
-
resolve();
-
-
process.nextTick(
() => {
-
console.log(
3);
-
});
-
-
console.log(
4);
-
}).
then(
() => {
-
console.log(
5);
-
});
-
-
setTimeout(
() => {
-
console.log(
6);
-
},
0);
-
-
console.log(
7);
-
复制代码
那么,打印的顺序到底是什么呢?
事件循环
-
for(var i =
0; i <
5; i++){
-
setTimeout(function after() {
-
console
.log(i);
-
},
0);
-
}
-
复制代码
这道题想必大家都见得很多了,答案脱口而出5个5。为什么呢? 答:闭包。 为什么会产生闭包呢? 答:。。。
这一切的一切都要从女娲补天开始说起(你咋不从盘古开天开始说起呢?)。
简单说明一下:
- 一般js是从上往下执行的,执行的时候会被放在调用栈中(图中的Call Stack)。
- 然后执行到了异步的事件(Ajax、定时器等),浏览器将作为Web api的一部分创建一个计时器,它将为你处理倒计时。
- 时间到了之后就会进入到任务队列当中(Callback Queue)。
- 事件循环从回调队列中获取函数,并将其推到调用堆栈。
- 从第一步开始。
所以,即便是setTimeout(fn, 0)
(实际上最小时间间隔是4ms)也是会从下一个事件周期开始执行。
上例中,由于after函数
引用了i
并且会在下一个事件周期中被调用,导致了i
的内存没办法被释放,等下个周期再来,哼 生米都煮成稀饭了。i
都被煮成5了。
关于内存,给大家推荐一篇我曾经翻译的一篇文章JavaScript是如何工作的:内存管理 + 如何处理4个常见的内存泄漏。 对理解闭包也非常有帮助。
这里我只是简单提了一下事件循环,更多的细节参考文末参考文献。
宏任务与微任务
一个宿主环境只有一个事件循环,但可以有多个任务队列。宏任务队列(macro task)与微任务队列(micro task)就是其中之二。
每次事件循环的时候,会先执行宏任务队列中的任务,然后再执行微任务队列中的任务。那么宏任务与微任务分别有哪些呢?
- 宏任务:script(全局任务), setTimeout, setInterval, setImmediate, I/O, UI rendering.
- 微任务:process.nextTick, Promise, Object.observer, MutationObserver.
-
new
Promise(
(resolve) => {
-
resolve();
-
}).
then(
() => {
-
console.log(
1);
-
});
-
setTimeout(
() => {
-
console.log(
2);
-
},
0);
-
console.log(
3);
-
复制代码
按照上面的说法,应该打印出 3、2、1啊。但实际上却打印出了3、1、2。原来像process.nextTick和Promise这种微任务,都添加的当前循环的微任务队列之中。所以会比当前循环中的所有宏任务要后执行,会比下个循环中的宏任务要先执行。
process.nextTick 与 Promise
-
process.nextTick(
() => {
-
console.log(
1);
-
});
-
new
Promise(
(resolve) => {
-
resolve();
-
}).
then(
() => {
-
console.log(
2);
-
});
-
process.nextTick(
() => {
-
console.log(
3);
-
});
-
复制代码
为什么我要把这两个同属于微任务的拎出来提一下呢?自己测试一下吧,因为结果大概会出乎你的意料。 why?
还好互联网是强大的。没有什么是百度不到的,如果有,那就google。
“process.nextTick 永远大于 promise.then,原因其实很简单。。。在Node中,_tickCallback在每一次执行完TaskQueue中的一个任务后被调用,而这个_tickCallback中实质上干了两件事:
- nextTickQueue中所有任务执行掉(长度最大1e4,Node版本v6.9.1)
- 第一步执行完后执行_runMicrotasks函数,执行microtask中的部分(promise.then注册的回调)所以很明显process.nextTick > promise.then”
小姐
Vue
中的nextTick
是宏任务与微任务混合使用,需要手动切换。终于真相大白了。定时器:好吧 我就原谅你比我先吧。
那么开头题的答案是什么呢?还是自己动手测试一下吧。
纸上得来终觉浅,觉知此事要躬行