小白理解 JavaScript 执行机制

1.JavaScript为什么是单线程？

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。 JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。

2、执行机制相关知识点

2.1同步任务、异步任务

• 同步任务
• 异步任务

有一天，张三要去做饭 这时候他要做两件事 分别是蒸米饭 和 抄菜 ，现在有两种方式去完成这个任务

A.先去蒸米饭 然后等蒸米饭好了 再去抄菜 ---同步任务

B.先去蒸米饭 然后等蒸米饭的过程中 再去抄菜 ---异步任务

其实这两个方式不就是 一种是同步任务（synchronous），另一种是异步任务（asynchronous）吗。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

当我们打开网站时，网页的渲染过程就是一大堆同步任务，比如页面骨架和页面元素的渲染。而像加载图片音乐之类占用资源大耗时久的任务，就是异步任务。，我们用导图来说明：

具体来说，异步执行的运行机制如下。（同步执行也是如此，因为它可以被视为没有异步任务的异步执行。）

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。 （2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。 （3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。 （4）主线程不断重复上面的第三步。

2.3、JavaScript的宏任务与微任务

　　除了广义上的定义，我们可以将任务进行更精细的定义，分为宏任务与微任务：

• 宏任务（macro-task）： 包括整体代码script脚本的执行，setTimeout，setInterval，ajax，dom操作 还有如 I/O 操作、UI 渲 染等
• 微任务（micro-task）： Promise回调 node 中的 process.nextTick 、对 Dom 变化监听的 MutationObserver。

主线程都从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为 Event Loop（事件循环）

我们解释一下这张图：

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

3、总结

3.1面试回答

面试中该如何回答呢？ 下面是我个人推荐的回答：

1. 首先js 是单线程运行的，在代码执行的时候，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。
2. 在执行同步代码的时候，如果遇到了异步事件，js 引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务
3. 当同步事件执行完毕后，再将异步事件对应的回调加入到与当前执行栈中不同的另一个任务队列中等待执行。
4. 任务队列可以分为宏任务对列和微任务对列，当当前执行栈中的事件执行完毕后，js 引擎首先会判断微任务对列中是否有任务可以执行，如果有就将微任务队首的事件压入栈中执行。
5. 当微任务对列中的任务都执行完成后再去判断宏任务对列中的任务。

3.2优先级

3.2.1 setTimeout()、setInterval()

setTimeout() 和 setInterval() 这两个函数，它们的内部运行机制完全一样，区别在于前者指定的代码是一次性执行，后者则为反复执行。

setTimeout() 和 setInterval() 产生的任务是 异步任务，也属于 宏任务。

setTimeout() 接受两个参数，第一个是回调函数，第二个是推迟执行的毫秒数。setInterval() 接受两个参数，第一个是回调函数，第二个是反复执行的毫秒数。

如果将第二个参数设置为0或者不设置，意思 并不是立即执行，而是指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在"任务队列"的尾部添加一个事件，因此要等到同步任务和"任务队列"现有的事件都处理完，才会得到执行。

所以说，setTimeout() 和 setInterval() 第二个参数设置的时间并不是绝对的，它需要根据当前代码最终执行的时间来确定的，简单来说，如果当前代码执行的时间（如执行200ms）超出了推迟执行（setTimeout(fn, 100)）或反复执行的时间（setInterval(fn, 100)），那么setTimeout(fn, 100) 和 setTimeout(fn, 0) 也就没有区别了，setInterval(fn, 100) 和 setInterval(fn, 0) 也就没有区别了。

3.2.2 Promise

Promise 相对来说就比较特殊了，在 new Promise() 中传入的回调函数是会 立即执行 的，但是它的 then() 方法是在 执行栈之后，任务队列之前 执行的，它属于 微任务。

3.2.3 process.nextTick

process.nextTick 是 Node.js 提供的一个与"任务队列"有关的方法，它产生的任务是放在 执行栈的尾部，并不属于 宏任务 和 微任务，因此它的任务 总是发生在所有异步任务之前。

3.2.4 setImmediate

setImmediate 是 Node.js 提供的另一个与"任务队列"有关的方法，它产生的任务追加到"任务队列"的尾部，它和 setTimeout(fn, 0) 很像，但优先级都是 setTimeout 优先于 setImmediate。

有时候，setTimeout 的执行顺序会在 setImmediate 的前面，有时候会在 setImmediate 的后面，这并不是 node.js 的 bug，这是因为虽然 setTimeout 第二个参数设置为0或者不设置，但是 setTimeout 源码中，会指定一个具体的毫秒数（node为1ms，浏览器为4ms），而由于当前代码执行时间受到执行环境的影响，执行时间有所起伏，如果当前执行的代码小于这个指定的值时，setTimeout 还没到推迟执行的时间，自然就先执行 setImmediate 了，如果当前执行的代码超过这个指定的值时，setTimeout 就会先于 setImmediate 执行。

3.2.5 总结优先级 重点重点重点重点重点重点

通过上面的介绍，我们就可以得出一个代码执行的优先级:

同步代码（宏任务） > process.nextTick > Promise（微任务）> setTimeout(fn)、setInterval(fn)（宏任务）> setImmediate（宏任务）> setTimeout(fn, time)、setInterval(fn, time)，其中time>0

4.用实例来检验一下学习成果

第一题：

setTimeout(function() {
  console.log(1)   //作为宏任务，暂不执行，放到任务队列中
}, 0);
new Promise(function(resolve, reject) {
  console.log(2);  //输出2
  resolve()
}).then(function() {
  console.log(3)  //then回调函数作为微任务，暂不执行 放入任务队列
});
//// 以下代码需要在 node 环境中执行
process.nextTick(function () {
  console.log(4)  //暂不执行 放入任务队列
})
console.log(5)    //输出5
复制代码

题目解析：

第一轮： setTimeout作为宏任务，暂不执行，放到任务队列中

执行new Promise 输出2 then回调函数作为微任务，暂不执行 放入任务队列

继续执行 遇见process.nextTick同样将回调函数扔到为任务队列，再继续执行，输出5

致此同步任务执行完成 根据前面得到的优先级 我们接着执行

process.nextTick输出4
寻找任务队列的`微任务 找到then`回调函数输出3 微任务执行完毕
寻找`宏任务`setTimeout输出1
结果： 25431
复制代码

第二题

console.log(1);  //立即输出1
​
setTimeout(function () {
    console.log(2);   // 作为宏任务，暂不执行，放到任务队列中
    new Promise(function (resolve, reject) {
        console.log(3); 
        resolve();
        console.log(4);
    }).then(function () {
        console.log(5);
    });
});
​
function fn() {
    console.log(6);
    setTimeout(function () {  // 作为宏任务，暂不执行，放到任务队列中
        console.log(7);
    }, 50);
}
​
new Promise(function (resolve, reject) {
    console.log(8);
    resolve();
    console.log(9);
}).then(function () { // 作为微任务，暂不执行
    console.log(10);
});
​
fn();
​
console.log(11);
​
// 以下代码需要在 node 环境中执行
process.nextTick(function () {
    console.log(12);
});
​
setImmediate(function () {
    console.log(13);
});
复制代码

此时输出为：1 8 9 6 11 12

运行微任务：

new Promise(function (resolve, reject) {
    // console.log(8); // 已执行
    // resolve(); // 已执行
    // console.log(9); // 已执行
})
.then(function () {
    console.log(10);
});
复制代码

此时输出为：10

读取"任务队列"的回调函数到"执行栈"：

setTimeout(function () {
    console.log(2);
​
    new Promise(function (resolve, reject) {
        console.log(3);
        resolve();
        console.log(4);
    })
    //.then(function () { // 作为微任务，暂不执行
    //  console.log(5);
    //});
});
复制代码

此时输出为：2 3 4

再运行微任务：

setTimeout(function () {
    // console.log(2); // 已执行
​
    new Promise(function (resolve, reject) {
        // console.log(3); // 已执行
        // resolve(); // 已执行
        // console.log(4); // 已执行
    })
    .then(function () {
        console.log(5);
    });
});
复制代码

此时输出为：5

再读取"任务队列"的回调函数到"执行栈"：

setImmediate(function () {
    console.log(13);
});
复制代码

此时输出为：13

运行微任务：

无

再读取"任务队列"的回调函数到"执行栈"：

// function fn() { // 已执行
    // console.log(6); // 已执行
    setTimeout(function () {
        console.log(7);
    }, 50);
// }
复制代码

此时输出为：7

运行微任务：

无

综上，最终的输出顺序是：1 8 9 6 11 12 10 2 3 4 5 13 7

看到这里的同学 想必应该已经掌握了JavaScript执行机制了吧

希望大家2021 心想事成

我是前端魔法师 一名小白 欢迎大家点赞 感谢大家

参考链接

www.cnblogs.com/shcrk/p/932…

www.ruanyifeng.com/blog/2014/1…

juejin.cn/post/684490…

cloud.tencent.com/developer/a…

juejin.cn/post/684490…