完全搞懂JavaScript执行机制

完全搞懂JavaScript执行机制

首先咱们你们都了解的是，JavaScript 是一门单线程语言，因此咱们就能够得出：

JavaScript 是按照语句顺序执行的

首先看：

let a = '1'
console.log(a)

let b = '2'
console.log(b)

这个显然你们都知道结果，依次输出1，2

然而换一种：

setTimeout(function() {
    console.log(1)
})

new Promise(function(resolve) {
    console.log(2)
    for(var i = 0;i< 10;i++){
        i === 10 && resolve()
    }
}).then(function() {
    console.log(3)
})
console.log(4)

这个时候再看代码的顺序执行，输出1，2， 3， 4。好了放到浏览器运行一下，什么？输出竟然是 2， 4， 3，1。说好的按顺序执行呢？下面就须要去了解一下 JavaScript 的执行机制问题了。

单线程

首先JavaScript 是一门单线程的语言，在最新的HTML5 推出的 Web-worker，可是 JavaScript 是一个单线程的语言这一个核心仍是没有改变。因此，JavaScript 的多线程都是基于单线程模拟出来的。因此牢记 JavaScript 是单线程语言。

事件循环

任务分为两类：

• 同步任务
• 异步任务

当咱们打开页面时，页面的渲染就是一大堆同步任务，而像加载图片和音频资源耗时的任务，就是异步任务。时间循环的主要内容就是：

1. 当任务进入执行栈的时候，判断是同步任务仍是异步任务，若是是同步任务，进入主线程进行执行，异步进入 Event Table 进行注册函数。
2. 当指定的事件完成后，Event Table 将这个函数移入到事件队列
3. 主线程中的任务执行完毕后，去任务队列读取对应的函数，进入主线程执行
4. 上述的过程不断重复，也就构成了事件循环

其中js引擎存在一个监控进程，不断检查主线程执行栈是否为空，一旦为空，就会去时间队列那检查有没有等待被调用的函数。

例如：

setTimeout( function() {
    console.log(1)
}, 0)
console.log(2)

• 首先 setTimeout进入Event Table
• 执行console.log(2)
• setTimeout执行的函数进入事件队列
• 主线程从事件队列读取函数执行

这也就是为何即便设置setTimeout(fn, 0)函数也不会当即执行的缘由。不过即便主线程为空，0ms也是达不到的，根据HTML标准，最低是4ms。

setInterval

还有一个与setTimeout相似的函数，对于setInterval来讲，是循环执行。对于执行顺序来讲，setInterval会每隔指定的时间将注册的函数置入Event Queue，若是前面的任务耗时过久，那么一样须要等待。

可是须要注意的一点是，对于setInterval(fn, ms)来讲，他并非每过ms执行一次 ，而是每过 ms 会有fn进入任务队列。也就是说若是setInterval 的回调函数的执行事件若是超过延迟ms,那么就看不出来事件间隔了。

Promise 和 process.nextTick(callback)

除了广义的同步任务和异步任务以外，还有对任务更精细的划分，分为:

• macro-task（宏任务）：包括总体代码script、setTimeout、setInterval
• micro-task（微任务）：Promise、process.nextTick

事件循环的顺序，决定js代码的执行顺序。进入总体代码(宏任务)后，开始第一次循环。接着执行全部的微任务。而后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行全部的微任务。

用一段代码来讲明：

setTimeout(function() {
    console.log('1');
})

new Promise(function(resolve) {
    console.log('2');
    resolve()
}).then(function() {
    console.log('3');
})

console.log('4');

• 这段代码做为宏任务，开始第一次循环
• 先遇到setTimeout，那么它的回调函数进入到宏任务事件队列中
• 遇到Promise,Promise当即执行，输出2，then任务进入到微任务事件队列中
• 下面遇到console，输出4
• 第一个宏任务结束，看微任务事件队列，执行then，输出3
• 第一轮循环结束，看宏任务队列中存在setTimeout的回调函数执行，输出1
• 全部结果为：2，4，3，1

好了了解了基本的原理以后，咱们来看一个更复杂的：

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. 首先整段代码做为一个宏任务进入主线程，首先遇到console.log()输出1
2. 遇到第一个setTimeout()进入宏任务队列
3. 遇到Process.nextTick()进入微任务队列
4. 而后遇到Promise，当即执行，输出7，then被添加到微任务队列
5. 遇到第二个setTimeout,进入宏任务队列
6. 而后执行两个微任务
7. 执行Process.nextTick()输出6
8. 执行then，输出8

这样第一轮循环就完全结束了，进行第二轮事件循环，也就是第一个setTimeout

1. 首先遇到console.log()，输出2
2. 遇到Process.nextTick()，进入微任务队列
3. 遇到Promise当即执行输出4，then进入微任务队列
4. 而后执行第一个微任务，输出3
5. 执行then，输出5

这样第二轮事件循环就结束了，最后执行第二个setTimeout，第二个setTimeout和上面原理相似，也就不重复说明了。因此最终结果是：1,7,6,8,2,4,3,5,9,11,10,12

原文地址：传送门