浏览器事件循环原理

jiezi

5 年前

通过一道题进入浏览器事件循环原理：

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`

js的执行环境是一个单线程，会按照顺序执行代码，但是 javaScript 又可以是异步，这两者感觉有冲突。如果理解浏览器的事件循环机制，就会觉得不冲突。

`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，执行完成以后再执行微队列，以此反复。

从 1 到3的过程就是一个循环，也就是咱们下面讲到的tick，所谓的事件循环就是重复一个一个的tick。

在前面给出了一道题，现在来对这道题进行分析。下面是这段代码的流程分析图：

首先整个代码块是一个 task 所以，先运行同步代码，当执行到 setTimeout 的时候，会向宏队列队尾中推入整个异步任务，这时候宏队列就有两个任务，当同步任务执行完成以后，也就是第一个 task 执行完成以后，会执行微队列中的任务。Promise是属于microtask，所以会推入微队列中。所以输出结果如下:

script start
script end
promise1
promise2
setTimeout

`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 源码有一定的了解
下面有一个示例，点击按钮，会让 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求关注，感谢。

浏览器事件循环原理

单线程

定义

原因

浏览器中的`Event Loop`

`macroTask`和`microTask`

示例分析

`Vue nextTick`原理

Vue 的批量异步更新策略

单线程

定义

原因

浏览器中的Event Loop

macroTask和microTask

示例分析

Vue nextTick原理

Vue 的批量异步更新策略

浏览器中的`Event Loop`

`macroTask`和`microTask`

`Vue nextTick`原理