通過一道題進入瀏覽器事件循環原理：
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的批量異步更新策略
注意：這個部分需要對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求關注，感謝。