【JS】这一次，彻底弄懂 JavaScript 执行机制

前言：这篇文章真的写的太好了，必须得分享分享~~~

原文网址：这一次，彻底弄懂 JavaScript 执行机制

导图一：

导图要表达的内容用文字来表述的话：

• 同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。
• 当指定的事情完成时，Event Table会将这个函数移入Event Queue。
• 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
• 上述过程会不断重复，也就是常说的Event Loop(事件循环)。

导图二：

除了广义的同步任务和异步任务，我们对任务有更精细的定义：

• macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
• micro-task(微任务)：Promise，process.nextTick

事件循环流程：

• 执行整体代码script，作为第一个宏任务，进入主线程。注意：遇到 setTimeout、setInterval，将其回调函数分发到宏任务Event Queue中。遇到 Promise，new Promise会立即执行一次，然后将 then 分发到微任务Event Queue中。遇到process.nextTick，将其回调函数分发到微任务Event Queue中。
• 执行微任务Event Queue：Promise、process.nextTick
• 执行宏任务Event Queue：setTimeout、setInterval

事件循环，宏任务，微任务的关系如图所示：

示例：

我们来分析一段较复杂的代码，看看你是否真的掌握了js的执行机制：

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')
    })
})

 整段代码，共进行了三次事件循环，完整的输出为1，7，6，8，2，4，3，5，9，11，10，12。
(请注意，node环境下的事件监听依赖libuv与前端环境不完全相同，输出顺序可能会有误差)

详细过程请参考原文，这里不再赘述。

END