JavaScript运行机制

前言

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

最先前先来看几个观点。

栈(后进先出)

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

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

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

JavaScript运行机制

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

行列(先进先出)

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

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

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

JavaScript运行机制

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

宏观义务(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实现短信转发到微信上

JavaScript运行机制

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

事宜循环,宏义务,微义务的关系如图所示:

JavaScript运行机制

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

总结

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

参考

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