『妈妈不再用担忧之』JavaScript执行机制

JavaScript执行机制

JavaScript是一门单线程语言，一切JavaScript中的“多线程”都是用单线程模拟出来的，而这主要是靠事件循环机制来实现的

事件循环

• 同步和异步任务分别进入不一样的执行场所，同步任务进入主线程中，而异步任务则进入Event Table并注册函数
• 当指定的事情（例如ajax事件）完成时，Event Table会将这个函数移入Event Queue
• 当主线程内的任务执行完毕时，会去Event Queue读取对应的函数，将其放入主线程中执行
• 上述过程会不断重复，整个过程便是事件循环Event Loop

JS引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就回去Event Queue那里检查是否有等待被调用的函数。

show demo

let data = {};
$.ajax({
    url: www.javascript.com,
    data: data,
    success: () => {
        console.log("发送成功!");
    }
})
console.log("同步代码执行结束");
复制代码

• 执行data变量声明赋值操做
• 碰到ajax,发现是个异步任务，将这个任务放入Event Table，注册回调函数success
• 继续向下执行console.log("同步代码执行结束");
• ajax事件完成，回调函数success进入Event Queue。
• 主线程任务执行完毕，从Event Queue中读取success并执行

setTimeout

setTimeout这个函数是通过指定时间后，把要执行的任务，加入到Event Queue中。又由于主线程任务是一个个执行，若是前面的任务执行须要的时间太长，那么Event Queue中的任务只能等着，因此可能会致使setTimeout要执行的任务真正的延迟时间会大于指定时间。

show demo

setTimeout(() => {
    task()
},3000)

sleep(10000000)
复制代码

• task进入Event Table并注册，计时开始
• 执行sleep函数，很慢，很是慢，计时还在继续
• 3秒到了，计时事件timeout完成，task进入Event Queue，可是由于sleep执行得太慢了，还没执行完，只好等着
• sleep终于执行完了，task终于从Event Queue进入到主线程中执行

setTimeout(fn, 0) // 指定某个任务在主线程执行栈为空后立刻执行，但根据HTML的标准，实际不可能达到0毫秒，最低是4毫秒
复制代码

setInterval

setInterval与setTimeout相似，不一样点在于，setInterval是循环的执行。它会每隔指定的时间，将注册的函数置入Event Queue，若是前面的任务耗时过久，那么一样须要等待。 对于setInterval(fn, ms)来讲，不是每过ms秒会执行一次fn，而是每过ms秒，会有fn进入Event Queue。一旦setInterval的回调函数fn执行时间超过了延时时间ms，那么就彻底看不出来有时间间隔了

更精细任务的定义

除了广义的同步任务和异步任务，还有对任务有更精确的定义

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

process.nextTick相似于node版的setTimeout，在下次循环的下一次循环中调用callback回调函数

不一样类型的任务会进入对应的Event Queue，例如setTimeout和setInterval会进入相同的Event Queue

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

show demo

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

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

console.log('console');
复制代码

• 这段代码做为宏任务，进入主线程。
• 先遇到setTimeout，那么将其回调函数注册后分发到宏任务Event Queue。(注册过程与上同，下文再也不描述)
• 接下来遇到了Promise，new Promise当即执行，并将then函数分发到微任务Event Queue。
• 遇到console.log()，当即执行。
• 总体代码script做为第一个宏任务执行结束，看看有哪些微任务？咱们发现了then在微任务Event Queue里面，执行。
• ok，第一轮事件循环结束了，咱们开始第二轮循环，固然要从宏任务Event Queue开始。咱们发现了宏任务Event Queue中setTimeout对应的回调函数，当即执行。
• 结束。

检验你是否真正的掌握了js的执行机制

题1：

async function async1() {
  console.log(1);
  const result = await async2();
  console.log(3);
}

async function async2() {
  console.log(2);
}

Promise.resolve().then(() => {
  console.log(4);
});

setTimeout(() => {
  console.log(5);
});

async1();
console.log(6);
复制代码

答案： [1,2,6,4,3,5]

• 整段代码做为宏任务，进入主线程
• 遇到两个async函数声明，先无论。接着遇到一个Promise, 将then函数分发到微任务Event Queue
• 遇到setTimeout，将其回调函数注册后分发到宏任务Event Queue
• 进入async1函数并执行，输出1
• 往下，遇到await并执行async2输出2，await意味着后面的代码要等等了
• console.log(3)是在async2函数返回的Promise的then函数中执行的，因此讲它分发到微任务Event Queue
• 此时主线程中宏任务执行完毕，开始按顺序执行微任务，先输出4，接着输出3
• 第一次事件循环完毕，开始第二次事件循环，开始执行新同步任务，输出5
• 结束

---

题2：

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]

第一轮事件循环流程分析以下：

• 总体script做为第一个宏任务进入主线程，遇到console.log，输出1。
• 遇到setTimeout，其回调函数被分发到宏任务Event Queue中。咱们暂且记为setTimeout1。
• 遇到process.nextTick()，其回调函数被分发到微任务Event Queue中。咱们记为process1。
• 遇到Promise，new Promise直接执行，输出7。then被分发到微任务Event Queue中。咱们记为then1。
• 又遇到了setTimeout，其回调函数被分发到宏任务Event Queue中，咱们记为setTimeout2

宏任务Event Queue	微任务Event Queue
setTimeout1	process1
setTimeout2	then1

• 上表是第一轮事件循环宏任务结束时各Event Queue的状况，此时已经输出了1和7。
• 咱们发现了process1和then1两个微任务。
• 执行process1,输出6。
• 执行then1，输出8。

好了，第一轮事件循环正式结束，这一轮的结果是输出1，7，6，8。那么第二轮时间循环从setTimeout1宏任务开始：

• 首先输出2。接下来遇到了process.nextTick()，一样将其分发到微任务Event Queue中，记为process2。new Promise当即执行输出4，then也分发到微任务Event Queue中，记为then2。

宏任务Event Queue	微任务Event Queue
setTimeout2	process2
	then2

• 第二轮事件循环宏任务结束，咱们发现有process2和then2两个微任务能够执行。
• 输出3。
• 输出5。
• 第二轮事件循环结束，第二轮输出2，4，3，5。
• 第三轮事件循环开始，此时只剩setTimeout2了，执行。
• 直接输出9。
• 将process.nextTick()分发到微任务Event Queue中。记为process3。
• 直接执行new Promise，输出11。
• 将then分发到微任务Event Queue中，记为then3。

宏任务Event Queue	微任务Event Queue
	process3
	then3

• 第三轮事件循环宏任务执行结束，执行两个微任务process3和then3。
• 输出10。
• 输出12。
• 第三轮事件循环结束，第三轮输出9，11，10，12。

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

感谢

这一次，完全弄懂 JavaScript 执行机制