皇上：“近日朕研究了一下JavaScript，有一些感触给大家分享一下众爱妃意下如何啊？”
富察皇后：“难得皇上有如此雅兴，大家也正好学习一下了，各位妹妹们你们说是不是啊？”
众人：“是”
皇上：“好～那朕就来讲讲，这JavaScript据说是这世界上未来最好的脚本语言。”
璎珞：“皇上什么是脚本语言啊？”
皇上：“是一种编程语言，用来控制软件应用程序，通常以文本保存，只是被调用时被解释和编译”
璎珞：“什么是编程啊皇上？”
皇上：“就是写代码”
璎珞：“什么是代码啊皇上？”
皇上摸了摸锃亮的头，仿佛有点脑壳疼。
富察皇后：“璎珞少问两句，皇上您继续讲吧”
皇上：“今天朕就讲一些简单的事件，任务与微任务还有Vue的nextTick有什么区别，本来啊这JavaScript是同步执行的，除了两种情况，那就是任务与微任务。”
高贵妃：“皇上那任务与微任务的区别是什么啊？”
皇上：“这个问题问得好！”
高贵妃满脸得意😎
皇上继续说：“这任务与微任务的区别就在于，微任务是本轮event loop执行完执行。任务是在下一轮的event loop执行。”
璎珞小声嘟囔着：“什么是event loop啊？”
皇上瞪了一眼璎珞：“主线程从队列中读取事件，这个过程是一个循环不断的，这个运行机制就叫做事件循环（event loop），懂了吗？”
璎珞：“哦”
皇上：“再在地下嘀嘀咕咕罚你去抄代码十遍”
璎珞心说：“哼！大猪蹄子～”
皇上拿出了一张黑色背景的纸，上面写满了奇怪的字符。
“这就是代码，昨晚朕熬夜加班写的！”：皇上一脸愁光。
“皇上是不是又加需求了？您要注意龙体啊，您要是累倒了，我们可如何是好？”富察皇后忧伤地说道。
李玉抱怨道：“是呢，现在的需求可是越来越多，上个需求还没做完下个需求又来了，还堆积了一大堆，皇上连续加班到十一点，周末都不曾休息，铁打的身体也受不了啊。”
皇上抬头看了看天，又看了看底下的众人，长叹一口气：“罢了罢了，看代码吧！”
console.log('start')
for(let i = 0;i <= 1000000000;i++) if(i == 1000000000) console.log('for loop')
setTimeout(()=>{
console.log('setTimeout')
},0)
Promise.resolve()
.then(()=>{
console.log('promise1');
})
.then(()=>{
console.log('promise2')
})
.then(()=>{
console.log('promise3')
})
this.$nextTick(()=>{
console.log('nextTick')
});
Promise.resolve()
.then(()=>{
console.log('promise4');
})
.then(()=>{
console.log('promise5');
})
console.log('end')
皇帝：“大家猜一下，这段代码的执行顺序是什么？”
纯贵妃：“我猜应该是先从start开始，顺讯应该是这样的，start->end->for loop->promise1->promise2->promise3->promise4->promise5->nextTick->setTimeout”
皇帝：“纯贵妃已经基本上明白了，微任务与任务的区别，但是还有两个地方不正确，还有谁来补充一下？”
愉贵人：“依臣妾看，大概是这样的，start->end->for loop->promise1->promise2->promise3->nextTick->promise4->promise5->setTimeout”
皇帝：“还是朕来给大家讲一下吧，众爱妃看下下面这张图”
璎珞：“哦 我知道了，应该是这样的。start->end->for loop->promise1->nextTick->promise4->promise2->promise5->promise3->setTimeout”
皇帝：“璎珞回答正确并顺手掀了璎珞的牌子”
tip 温馨提示 nextTick实现源码，为什么属于第一次微任务
// 回调函数
var callbacks = [];
var pending = false;
function flushCallbacks () {
pending = false;
var copies = callbacks.slice(0);
callbacks.length = 0;
for (var i = 0; i < copies.length; i++) {
copies[i]();
}
}
var p = Promise.resolve();
microTimerFunc = function () {
p.then(flushCallbacks);
};
// cb不用说了，就是回调函数，ctx是vue的上下文
function nextTick (cb, ctx) {
var _resolve;
callbacks.push(function () {
if (cb) {
try {
cb.call(ctx);
} catch (e) {
handleError(e, ctx, 'nextTick');
}
} else if (_resolve) {
_resolve(ctx);
}
});
if (!pending) {
pending = true;
microTimerFunc();
}
}
