瀏覽器事件循環原理

經過一道題進入瀏覽器事件循環原理：

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

1. 首先執行宏隊列中取出第一個，一段script就是至關於一個macrotask,因此他先會執行同步代碼，當遇到例如setTimeout的時候，就會把這個異步任務推送到宏隊列隊尾中。
2. 當前macrotask執行完成之後，就會從微隊列中取出位於頭部的異步任務進行執行，而後微隊列中任務的長度減一。
3. 而後繼續從微隊列中取出任務，直到整個隊列中沒有任務。若是在執行微隊列任務的過程當中，又產生了microtask，那麼會加入整個隊列的隊尾，也會在當前的週期中執行
4. 當微隊列的任務爲空了，那麼就須要執行下一個macrotask，執行完成之後再執行微隊列，以此反覆。
   總結下來就是不斷從task隊列中按順序取task執行，每執行完一個task都會檢查microtask是否爲空，不讓過不爲空就執行隊列中的全部microtask。而後在取下一個task以此循環

調用棧和任務隊列

調用棧是一個棧結構，函數調用會造成一個棧幀。棧幀：調用棧中每一個實體被稱爲棧幀，幀中包含了當前執行函數的參數和局部變量等上下文信息，函數執行完成後，它的執行上下文會從棧中彈出。 下面是調用棧和任務隊列的關係:

分析文章開頭的題目，能夠經過在題目前面添加 debugger，結合 chrome的 call stack進行分析:

(這裏不知道怎麼畫動圖，在晚上找的一張圖，小夥伴們有好的工具，求分享); 下面藉助三個數組來分析一下這段代碼的執行流程， call stack表示調用棧， macroTasks表示宏隊列， microTasks表示微隊列：

1. 首先代碼執行以前都是三個隊列都是空的:

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
複製代碼

4. 當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求關注，感謝。