开端
在 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);
事件循环
这道题想必大家都见得很多了,答案脱口而出 5 个 5.为什么呢? 答:闭包. 为什么会产生闭包呢? 答:...
for(var i = 0; i < 5; i++){
setTimeout(function after() {
console.log(i);
}, 0);
}
这一切的一切都要从女娲补天开始说起(你咋不从盘古开天开始说起呢?).
简单说明一下:
一般 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.
按照上面的说法,应该打印出 3,2,1 啊.但实际上却打印出了 3,1,2.原来像 process.nextTick 和 Promise 这种微任务,都添加的是当前循环的微任务队列之中.所以会比当前循环中的所有宏任务要后执行,会比下个循环中的宏任务要先执行.
new Promise((resolve) => {
resolve();
}).then(() => {
console.log(1);
});
setTimeout(() => {
console.log(2);
}, 0);
console.log(3);
process.nextTick 与 Promise
为什么我要把这两个同属于微任务的拎出来提一下呢?自己测试一下吧,因为结果大概会出乎你的意料. why
process.nextTick(() => {
console.log(1);
});
new Promise((resolve) => {
resolve();
}).then(() => {
console.log(2);
});
process.nextTick(() => {
console.log(3);
});
还好互联网是强大的.没有什么是百度不到的,如果有,那就 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 是宏任务与微任务混合使用,需要手动切换.终于真相大白了.定时器:好吧 我就原谅你比我先吧.
那么开头题的答案是什么呢?还是自己动手测试一下吧.
纸上得来终觉浅,觉知此事要躬行
咦,小姐?什么小姐?你说的是
我:滚,打错了而已.是小结.
我:什么? 你请客!走啊走啊!
楼主被捕,完.
setImmediate
顺序之争还有一个奇怪的现象.
然而你会发现,特么有时候打印 1,2,有时候打印 2,1.你为什么像个女人一样啊.
setImmediate(() => {
console.log(1);
});
setTimeout(() => {
console.log(2);
}, 0);
nodejs 官网给出的解释是:
setImmediate(): 是被设计用来一旦当前阶段的任务执行完后执行.
setTimeout(): 是让代码延迟执行.
如果没有在一个 I/O 周期执行,那么其执行顺序是不确定的.
如果在一个 I/O 周期执行,setImmediate 总是优先于 setTimeout 执行.
总是: 先打印 immediate 再打印 timeout.
const fs = require('fs');
fs.readFile(__filename, () => {
setTimeout(() => {
console.log('timeout');
}, 0);
setImmediate(() => {
console.log('immediate');
});
});
参考文献:
阮一峰老师的文章 --- JavaScript 运行机制详解:再谈 Event Loop .(这篇文章有部分错误,建议每个例子自己尝试,看看评论,查查资料.)
NodeJs 官方文档 --- The Node.js Event Loop, Timers, and process.nextTick() ;
nextTick 的优先级高于 promise 的答案在知乎的回答中找到 --- Promise 的队列与 setTimeout 的队列有何关联? ;
javascript 是如何工作系列中的一篇文章 --- How JavaScript works: Event loop and the rise of Async programming + 5 ways to better coding with async/await) 的作用 ;
JavaScript 异步,栈,事件循环,任务队列
来源: https://juejin.im/post/5a72df6cf265da3e2c3870b9