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 执行机制

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

JavaScript执行机制

事件循环

show demo

setTimeout

show demo

setInterval

更精细任务的定义

show demo

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

感谢