JavaScript运行机制

前言

本文要讲的是，浏览器读一个script代码的流程是什么，遇到异步代码会若何处置，宏观义务和微观义务若何处置。

最先前先来看几个观点。

栈（后进先出）

首先要说一个栈模子，函数的挪用形成了栈帧。

function f1() {     
    f2();
}
function f2() {}
f1();

例如这段代码，挪用 f1 时，建立第一帧；f1 挪用 f2 时，建立第二帧。第二帧压在第一帧之上，当 f2 运行完成，此时最上层第二帧弹出栈，当 f1 运行完成，此时最上层第一帧也弹出栈，栈就空了。也就是常说的后进先出。

这个栈也就是常说的 执行栈，执行的是义务行列里的义务。

行列（先进先出）

然后说一下行列。行列中放着义务。

若是有新的义务（例如用户触发了点击事宜），会加入行列，排在后面。

行列里的义务会放在执行栈中执行。

行列有两种：宏观义务行列和微观义务行列。
划分放着两种义务：宏观义务和微观义务。

宏观义务(Task，或者叫MacroTask)

宿主提议的义务。

如包罗代码的script, setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering

微观义务(MicroTask)

JavaScript引擎提议的义务为微观义务。微义务相当于加急的义务，时间循环会优先处置完微义务。

如 process.nextTick, Promises, Object.observe, MutationObserver

浏览器中的事宜循环（Event Loop）

主线程从”义务行列”中读取事宜，这个历程是循环不断的，以是整个的这种运行机制又称为Event Loop（事宜循环）。

React Native实现短信转发到微信上

执行栈（stack）执行历程中若是遇到异步代码，会将其移除本次执行，加入到其他线程中，处置完成后该线程会把义务添加到对应的义务行排队尾。例如setTime延迟竣事后会被添加到宏观义务行列，promise执行完成后会被添加到微观义务行列。

事宜循环，宏义务，微义务的关系如图所示：

script标签的整块代码是执行栈的第一个执行义务。

下面来看一段代码

测试：宏义务微义务执行顺序

setTimeout(() => console.log(1))

console.log(2);

new Promise((resolve, reject) => {
    console.log(3)
    resolve();
}).then(() => console.log(4))

console.log(5)

执行历程：

执行第一个宏义务（整块代码）
遇到setTimeout，跳过（延迟竣事后被添加到宏观义务行列）
打印 2
new promise属于同步代码，打印 3，then属于异步，跳过promise.then(完成后被添加到微观义务行列)
打印 5
执行竣事
有可执行的微义务，最先微义务
打印4
执行竣事
没有可执行的微义务，最先宏义务
打印1
执行竣事
没有微义务，没有宏义务。

以是执行效果：2 3 5 4 1

测试：setTimeout第二个参数是最小延迟时间

var t = +new Date();

setTimeout(() => {
    console.log('timer 2秒，现实时间为3秒');
}, 2000)

setTimeout(() => {
    console.log('timer 1秒，现实时间为3秒');
}, 1000)

while (+new Date() - t < 3000) {} // 延迟3秒

剖析：第一秒时刻，第二个setTimeout插入宏观义务行列；第二秒时，第一个setTimeout插入宏观义务行列；第三秒

第一秒：第二个setTimeout插入宏观义务行列；
第二秒：第一个setTimeout插入宏观义务行列；
第三秒：代码执行竣事；
没有可执行微观义务，执行宏观义务输出 ‘timer 1秒，现实时间为3秒’，代码执行竣事;
没有可执行微观义务，执行宏观义务输出 ‘timer 2秒，现实时间为3秒’，代码执行竣事;

可见setTimeout延迟竣事后立刻插入宏观义务行列。

以是执行效果为：
timer 1秒，现实时间为3秒
timer 2秒，现实时间为3秒

测试：宏义务在微义务之前完成

setTimeout(() => console.log(1))

fetch('https://deployment.whosmeya.com/api/getok')
    .then(() => console.log(2))

var t = +new Date();
while (+new Date() - t < 2000) {} // 延迟两秒

剖析：虽然宏观义务setTimeout在微观义务promise之前完成，第一次宏义务（整块代码）执行竣事后，监测到有可执行微观义务，以是先执行微观义务。

以是执行效果：2 1

测试：宏义务包罗微义务

setTimeout(() => console.log(1))

new Promise(function (resolve, reject) {
    setTimeout(() => resolve())
}).then(() => console.log(2))

剖析：第一个宏义务（代码块）执行完成后，宏观义务行列会有两个宏观义务，以是第一个setTime先执行。执行栈的义务执行顺序为：代码块，第一个setTimeout，第二个setTimeout，promise.then。

以是执行效果为：1 2

总结

javascript是单线程的意思是主线程为单线程，除此之外还拥有渲染线程，事宜线程等。
event loop 总是一直的监听义务行列，有义务就放进执行栈。
微观义务就像加急义务，总是优先所有执行。
执行栈遇到异步代码会给其他线程执行，执行完成后会被该线程插入对应义务行列。

参考

原创文章，作者：admin，如若转载，请注明出处：https://www.2lxm.com/archives/2445.html