JS开发者应懂的33个概念系列1&&9--调用堆栈 && 消息队列和事件循环

JS分为同步任务和异步任务，好比：

// 同步任务
console.log('start');
function first() {
    console.log('first');
    second();
}
function second() {
    console.log('second');
}
first();

// 异步任务
setTimeout(function() {
  console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {
  console.log('promise1');
})
process.nextTick(function() {
    console.log('nextTick');
})
复制代码

执行栈是什么？

同步任务都在主线程上执行，造成一个执行栈

以上同步任务的执行过程图解：

消息队列是什么？

主线程以外，事件触发线程管理着一个消息队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。
一旦执行栈中的全部同步任务执行完毕（此时JS引擎空闲），系统就会读取消息队列，将可运行的异步任务添加到可执行栈中，开始执行。

小结1:

Promise.resolve().then(function() {
  console.log('promise1');
})
console.log('end');
复制代码

---

• promise进入异步线程，执行任务，注册回调函数then;
• 主线程执行同步任务：console.log('end');
• 主线程代码执行完毕，执行回调函数：console.log('promise1');
• 结束，输出顺序：end, promise1

---

宏任务（task）是什么？

浏览器为了可以使得JS内部task与DOM任务可以有序的执行，会在一个task执行结束后，在下一个 task执行开始前，对页面进行从新渲染（task->渲染->task->...）
属于宏任务的有：setTimeout，setInterval等与timer有关的

微任务（Microtask）是什么？

微任务是一个任务队列，这个队列的执行顺序是在清空执行栈以后。
属于微任务的有Promise，process.nextTick，ajax等
process.nextTick的概念和then不太同样，process.nextTick是加入到执行栈底部，因此和其余的表现并不一致,属于执行栈的一部分

重点来了：事件循环Event Loop是如何运行的？

从Event Loop谈JS的运行机制

运行机制：

• 执行一个宏任务（栈中没有就从事件队列中获取）
• 执行过程当中若是遇到微任务，就将它添加到微任务的任务队列中
• 同步任务执行完毕后，当即执行当前微任务队列中的全部微任务（依次执行）
• 当前主线程任务执行完毕，开始检查渲染，而后GUI线程接管渲染
• 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

小结2：

setTimeout(function() {
    console.log('setTimeout');
})
new Promise(function(resolve) {
    console.log('promise');
    resolve();
}).then(function() {
    console.log('then');
})
console.log('console');

复制代码

---

• 先遇到setTimeout，那么将其回调函数注册后分发到宏任务Event Queue
• 接下来遇到了Promise，new Promise当即执行console.log('promise');
• then函数分发到微任务的消息队列中
• 遇到console.log('console')，当即执行
• then函数拿到主线程执行console.log('then')
• 至此全部主线程上的同步任务和微任务完成，第一轮循环结束
• 第二轮循环以以前放进去的宏任务setTimeout的回调函数开始，输出setTimeout
• 第二轮循环结束，最终输出：promise, console, then, setTimeout

---

到此就结束了。

贴上一个很是经典的例子,检验一下本身吧！

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})
复制代码