浏览器事件循环原理

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

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执行的具体流程就是以下：

1. 首先执行宏队列中取出第一个，一段script就是至关于一个macrotask,因此他先会执行同步代码，当遇到例如setTimeout的时候，就会把这个异步任务推送到宏队列队尾中。
2. 当前macrotask执行完成之后，就会从微队列中取出位于头部的异步任务进行执行，而后微队列中任务的长度减一。
3. 而后继续从微队列中取出任务，直到整个队列中没有任务。若是在执行微队列任务的过程当中，又产生了microtask，那么会加入整个队列的队尾，也会在当前的周期中执行
4. 当微队列的任务为空了，那么就须要执行下一个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的批量异步更新策略

注意：这个部分须要对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求关注，感谢。