[学习交流] 【上海校区】浏览器事件循环原理

本帖最后由没名字i 于 2019-10-25 12:09 编辑

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

[JavaScript] 纯文本查看 复制代码

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，所以会推入微队列中。所以输出结果如下:

[AppleScript] 纯文本查看 复制代码

script start
script end
promise1
promise2
setTimeout

Vue nextTick原理
Vue内部实现了nextTick函数，传入一个cb函数，这个cb会存储到一个队列中，在下一个tick中触发队列中所有的cb事件。
首先定义一个数组callbacks来存储下一个tick需要执行的任务，pending是一个标志位，保证在下一个tick之前只执行一次。timeFunc是一个函数指针，针对浏览器支持情况，使用不同的方法

[AppleScript] 纯文本查看 复制代码

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()
  }
}

nextTickHandler的作用就是将callbacks存储的函数都调用一遍。下面再来看timeFunc的实现：

[AppleScript] 纯文本查看 复制代码

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次，那手机就卡死了。

[AppleScript] 纯文本查看 复制代码

<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方法

[AppleScript] 纯文本查看 复制代码

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，但是在项目中也需要尽量避免这种多次更改的情况。
例如以下代码:

[AppleScript] 纯文本查看 复制代码

const watcher1 = new Watcher();
const wather2 = new Watcher();

watcher1.update();
watcher2.update();
watcher2.update();

一个watcher触发了两次update，但是输出结果如下：

[AppleScript] 纯文本查看 复制代码

update: 1
update: 2
update: 2
run: 1
run: 2

虽然watcher2触发了两次update，但是因为Vue对相同的Watcher进行了过滤，所以在queue中只会存在一个watcher。run方法的调用会在nextTick中调用，也就是先前提到的microtask中进行调用。从而输出了上面的结果

链接：https://juejin.im/post/5db024a46fb9a0203b2345dc

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【上海校区】浏览器事件循环原理

0 个回复