前言
本文要讲的是,浏览器读一个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 总是一直的监听义务行列,有义务就放进执行栈。
- 微观义务就像加急义务,总是优先所有执行。
- 执行栈遇到异步代码会给其他线程执行,执行完成后会被该线程插入对应义务行列。
参考
- 这一次,彻底弄懂 JavaScript 执行机制
- Event Loop的规范和实现
- JavaScript 运行机制详解:再谈Event Loop
- Concurrency model and the event loop
- whatwg event loops
- whatwg timers
原创文章,作者:admin,如若转载,请注明出处:https://www.2lxm.com/archives/2445.html