/ javascript

JavaScript运行机制的一些总结(微任务)

说javascript运行机制之前,先看一段代码:

console.log(1)

Promise.resolve().then(function () {
console.log(2)
})

new Promise(function(resolve, reject){
console.log(3)
resolve()
}).then(function () {
console.log(4)
setTimeout(function () {
console.log(5)
})
})

console.log(6)

setTimeout(function () {
Promise.resolve().then(function () {
console.log(7)
setTimeout(function () {
console.log(8)
})
})
})
如果你看到这段代码,并知道正确的输出顺序。那说明你对这块掌握的差不多了。(直接翻到最后看结果)

好,言归正传。

在说是怎么运行的之前,先看几个概念。

执行上下文(Execution Context)

执行上下文简单来说就是一个执行环境。它有全局环境、函数环境和eval函数环境之分。它会在javascript引擎执行你的脚本的时候去创建。

执行栈(Execution Stack)

执行栈也就是常说的调用栈,它是一种拥有LIFO(后进先出)的数据结构。它会存储代码运行时创建的执行上下文

我们把宿主(浏览器,node)发起的任务称为宏观任务,把 JavaScript 引擎发起的任务称为微观任务。

微任务(micro task)与宏任务(macro task)

javasript中的任务分为微任务和宏任务两种,这两种任务的执行时机是不同的,因此区分js中哪些是宏任务,哪些是微任务则十分重要。我们常见的宏任务有:script任务、setTimeout、ajax等浏览器发起的,常见的微任务比较典型的是:Promise.resolve().then()、process.nextTick、MutationObserver等都是javascript引擎发起的。

事件循环(event loop)

js是单线程的,也就是说它一次仅能处理一个任务。但js所在的宿主环境,也就是我们所说的浏览器并不是单线程的(这里宿主环境仅讨论浏览器)。它在遇到一些任务时,比如说setTimeout、event listener等。它会告诉浏览器:老兄帮个忙,事成后通知我一声,小弟我先干别的事去了。浏览器会回应说:交给我吧,小老弟,事成后我放到任务队列,自己去取啊。于是,js开始执行script任务,执行完了就开始检查有没有微任务啊,没有的话就从任务队列开始取宏任务执行,每执行完一次宏任务,就去看看有没有微任务,有的话就执行完成,再执行宏任务,如此往复。
结果
1
3
6
2
4
5050
7
5
8

-----2019-02-25---10.00.09

-----2019-02-25---10.00.24