通过一道题进入浏览器事件循环原理:
console.log('script start')
setTimeout(function () {
console.log('setTimeout')
}, 0);
Promise.resolve().then(function () {
console.log('promise1')
}).then(function () {
console.log('promise2')
})
console.log('script end')
可以先试一下,手写出执行结果,然后看完这篇文章以后,在运行一下这段代码,看结果和预期是否一样
单线程
定义
单线程意味着所有的任务需要排队,前一个任务结束,才能够执行后一个任务。如果前一个任务耗时很长,后面一个任务不得不一直等着。
原因
javascript
的单线程,与它的用途有关。作为浏览器脚本语言,javascript
的主要用途是与用户互动,以及操作DOM
。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定javascript
同时有两个线程,一个在添加DOM
节点,另外一个是删除DOM
节点,那浏览器应该应该以哪个为准,如果在增加一个线程进行管理多个线程,虽然解决了问题,但是增加了复杂度,为什么不使用单线程呢,执行有个先后顺序,某个时间只执行单个事件。
为了利用多核CPU
的计算能力,HTML5
提出Web Worker
标准,运行javascript
创建多个线程,但是子线程完全受主线程控制,且不得操作DOM
。所以,这个标准并没有改变javascript
单线程的本质
浏览器中的Event Loop
事件循环这个名字来源于它往往这么实现:
while(queue.waitForMessage()) {
queue.processNextMessage();
}
这个模型的优势在于它必须处理完一个消息(run to completion),才会处理下一个消息,使程序可追溯性更强。不像C语言可能随时从一个线程切换到另一个线程。但是缺点也在于此,若同步代码阻塞则会影响用户交互
macroTask
和microTask
宏队列,macroTask
也叫tasks
。包含同步任务,和一些异步任务的回调会依次进入macro task queue
中,macroTask
包含:
- script代码块
- setTimeout
- requestAnimationFrame
- I/O
- UI rendering
微队列, microtask
,也叫jobs
。另外一些异步任务的回调会依次进入micro task queue
,等待后续被调用,这些异步任务包含:
- Promise.then
- MutationObserver
下面是Event Loop
的示意图
javascript
执行的具体流程就是如下:
- 首先执行宏队列中取出第一个,一段
script
就是相当于一个macrotask
,所以他先会执行同步代码,当遇到例如setTimeout
的时候,就会把这个异步任务推送到宏队列队尾中。 - 当前
macrotask
执行完成以后,就会从微队列中取出位于头部的异步任务进行执行,然后微队列中任务的长度减一。 - 然后继续从微队列中取出任务,直到整个队列中没有任务。如果在执行微队列任务的过程中,又产生了
microtask
,那么会加入整个队列的队尾,也会在当前的周期中执行 - 当微队列的任务为空了,那么就需要执行下一个
macrotask
,执行完成以后再执行微队列,以此反复。
总结下来就是不断从task
队列中按顺序取task
执行,每执行完一个task
都会检查microtask
是否为空,不让过不为空就执行队列中的所有microtask
。然后在取下一个task
以此循环
调用栈和任务队列
调用栈是一个栈结构,函数调用会形成一个栈帧。栈帧:调用栈中每个实体被称为栈帧,帧中包含了当前执行函数的参数和局部变量等上下文信息,函数执行完成后,它的执行上下文会从栈中弹出。 下面是调用栈和任务队列的关系:
分析文章开头的题目,可以通过在题目前面添加debugger
,结合chrome
的call stack
进行分析:
(这里不知道怎么画动图,在晚上找的一张图,小伙伴们有好的工具,求分享);
下面借助三个数组来分析一下这段代码的执行流程,call stack
表示调用栈,macroTasks
表示宏队列,microTasks
表示微队列:
- 首先代码执行之前都是三个队列都是空的:
callStack: []
macroTasks: [main]
microTasks: []
在前面提到,整个代码块就相当于一个macroTask
,所以首先向callStack
中压入main()
,main
相当于整个代码块
2. 执行main
,输出同步代码结果:
callStack: [main]
macroTasks: []
microTasks: []
在遇到setTimeout
和promise
的时候会向macroTasks
与microTasks
中分别推入
3. 此时的三个队列分别是:
callStack: [main]
macroTasks: [setTimeout]
microTasks: [promise]
当这段代码执行完成以后,会输出:
script start
script end
- 当
main
执行完成以后,会取microTasks
中的任务,放入callStack
中,此时的三个队列为:
callStack: [promise]
macroTasks: [setTimeout]
microTask: []
当这个promise
执行完成后会输出
promise1
后面又有一个then
,在前面提到如果还有microtask
就在微队列队尾中加入这个任务,并且在当前tick
执行。所以紧接着输出promise2
5. 当前的tick
也就完成了,最后在从macroTasks
取出task
,此时三个队列的状态如下:
callStack: [setTimeout]
macroTasks: []
microTask: []
最后输出的结果就是setTimeout
。
所谓的事件循环就是从两个队列中不断取出事件,然后执行,反复循环就是事件循环。经过上面的示例,理解起来是不是比较简单
Event Loop
使用
本部分需要对Vue
源码有一定的了解,如果不了解,可以跳过。
nextTick原理
Vue
内部实现了nextTick
函数,传入一个cb
函数,这个cb
会存储到一个队列中,在下一个tick
中触发队列中所有的cb
事件。
首先定义一个数组callbacks
来存储下一个tick
需要执行的任务,pending
是一个标志位,保证在下一个tick
之前只执行一次。timeFunc
是一个函数指针,针对浏览器支持情况,使用不同的方法
function nextTick() {
const callbacks = [];
let pending = false;
let timeFunc
}
function nextTickHandler() {
pending = false;
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
nextTickHandler
的作用就是将callbacks
存储的函数都调用一遍。下面再来看timeFunc
的实现:
if (typeof Promise !== 'undefined') {
timeFunc = () => {
Promise.resolve()
.then(nextTickHandler)
}
} else if (typeof MutationObserver !== 'undefined') {
// ...
} else {
timeFunc = () => {
setTimeout(nextTickHandler, 0)
}
}
优先使用Promise
、MutationObserver
因为这两个方法的回调函数都会在microtask
中执行,他们会比setTimeout
更早执行,所以优先使用。下面是MutationObserver
的实现:
const counter = 1;
const observer = new MutationObserver(nextTickHandler)
const textNode = document.createTextNode(counter)
observer.observe(textNode, {
characterData: true,
})
timeFunc = () => {
couter = (counter + 1) % 2;
textNode.data = String(counter)
}
每次调用timeFunc
,都会更改counter
的值,改变DOM
的值后,触发observer
从而实现回调。
如果上述两种方法都不支持的环境则会使用setTimeout
。setTimeout
会在下一个tick
中执行。为什么使用这种方式,根据HTML Standard
,每个task
运行完以后,UI
都会重新渲染,那么在microtask
中完成数据更新,当前task
结束后就可以得到最新的UI
了,否则就需要等到下一个tick
进行数据更新,但是此时已经渲染了两次
Vue的批量异步更新策略
注意:这个部分需要对Vue
源码有一定的了解
下面有一个示例,点击按钮,会让count
从0
增加到1000
。如果每次count
的修改都会触发DOM
的更新,那么DOM
都会更新1000
次,那手机就卡死了。
<div>{{count}}</div>
<button @click="addCount">click</button>
data () {
return {
count: 0,
}
},
methods: {
addCount() {
for (let i = 0; i < 1000; i++ ){
this.count += 1;
}
}
}
那么Vue
是如何避免这种事情的,每次触发某个数据的setter
方法后,对应的Watcher
对象就会被push
进一个队列queue
中,Watcher
对象用来触发真实DOM
的更新。
let id = 0;
class Watcher {
constructor() {
this.id = id++;
}
update() {
console.log('update:' + id);
queueWatcher(this);
}
run() {
console.log('run:' + id);
}
}
当触发setter
会触发Watcher
对象的update
,run
方法用来更新页面。
queue
中加入属于这个数据的watcher
,每个watcher
都有专属的id
,这样就避免重复添加同一个watcher
。waiting
是一个标志位,在下一个tick
的时候执行flushSchedulerQueue
来执行队列queue
中所有的watcher
对象的run
方法
const has = {};
const queue = [];
let waiting = false;
function queueWatcher(watcher) {
const id = watcher.id;
if (has[id] == null) {
queue.push(watcher)
has[id] = true;
}
if (!waiting) {
waiting = true;
nextTick(flushScheulerQueue)
}
}
function flushScheulerQueue() {
for (index = 0; index < queue.length; index++) {
watcher = queue[index]
id = watcher.id;
has[id] = null;
watcher.run();
}
wating = false;
}
这样当一个值多次发生改变时,实际上只会往这个queue
队列中加入一个,然后在nextTick
中进行回调,遍历queue
对页面进行更新,这样也就实现了多次更改data
的时候只会更新一次DOM
,但是在项目中也需要尽量避免这种多次更改的情况。
例如以下代码:
const watcher1 = new Watcher();
const wather2 = new Watcher();
watcher1.update();
watcher2.update();
watcher2.update();
一个watcher
触发了两次update
,但是输出结果如下:
update: 1
update: 2
update: 2
run: 1
run: 2
虽然watcher2
触发了两次update
,但是因为Vue
对相同的Watcher
进行了过滤,所以在queue
中只会存在一个watcher
。run
方法的调用会在nextTick
中调用,也就是先前提到的microtask
中进行调用。从而输出了上面的结果
本文讲了js
的事件轮询机制,是不是对同步异步了解的更加清晰。学一个知识点最重要的对其进行落地,可以自己多尝试一下,更加深入了解事件轮询机制。github
求关注,感谢。