快捷導(dǎo)航

Vue nextTick的原理解析

更新時(shí)間：2021年04月25日 08:58:23 作者：我在曾經(jīng)眺望彼岸

這篇文章主要介紹了Vue nextTick的原理解析，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下

Event Loop

Event Loop翻譯過來就是事件循環(huán), 一個(gè)Event Loop會(huì)包括一個(gè)或多個(gè)task隊(duì)列，持續(xù)線程會(huì)從隊(duì)列中取出最早進(jìn)入隊(duì)列的任務(wù)進(jìn)行執(zhí)行，被取出的任務(wù)就叫做macroTask(宏任務(wù)), 每個(gè)macroTask都有一個(gè)任務(wù)源, 每個(gè)macroTask處理完之后就從隊(duì)列中取出下一個(gè)時(shí)間最早進(jìn)入的macroTask再重執(zhí)行

任務(wù)源：

```
    1. script
    2. 事件
    3. Dom交互
    4. I/O
    5. UI Render
    6. setTimeout
    7. setInterval
    8. requestAnimationFrame
    .....
```

也就是說碰到以上幾種情況就會(huì)產(chǎn)生一個(gè)macroTask并且推入到隊(duì)列中

miscroTask(微任務(wù))

執(zhí)行完每個(gè)macroTask之后，主線程會(huì)去檢查該macroTask下的microTask是否為空，如果不為空，則按照時(shí)間順序從早到晚取出，如果途中有遇到新的microTask, 那么會(huì)繼續(xù)將該microTask推入到microTask隊(duì)列里

UI Render(重點(diǎn))

伴隨著miscroTask隊(duì)列的清空，主線程就會(huì)執(zhí)行UI Render, 也就是渲染界面，但是瀏覽器它并不會(huì)每次在UI Render任務(wù)下一定會(huì)渲染界面，視情況而言，現(xiàn)在主流瀏覽器一般都是按照60HZ 也就是16.7ms刷新頻率進(jìn)行渲染(不是精確估量)，一個(gè)macroTask通常是小于16.7ms, 所以瀏覽器每次會(huì)根據(jù)情況進(jìn)行渲染

總結(jié)下一個(gè)循環(huán)

1. 從macroTask隊(duì)列里取出最早添加進(jìn)去的
2. 開始執(zhí)行task, 途中如果遇到新的macroTask，就會(huì)將其添加到macroTask隊(duì)列的最后面
3. 執(zhí)行完macroTask之后，event loop會(huì)去尋找microTask隊(duì)列
4. 同樣的道理，如果途中遇到新的microTask，將其放入該macroTask下的microTask隊(duì)列最后面
5. 執(zhí)行完microTask，會(huì)執(zhí)行UI Render macroTask
6. 瀏覽器會(huì)根據(jù)現(xiàn)有情況決定是否更新DOM，通常是按照60HZ的頻率去更新
7. 至此，一個(gè)event loop結(jié)束了

nextTick

我們開始分析nextTick

根據(jù)上圖
我們看到nextTick的幾種寫法:

    1. this.$nextTick(cb)
    2. this.$nextTick().then(cb)

所有的cb都會(huì)被放入到callbacks數(shù)組里，等待一次性調(diào)用
上圖中我們看到了主要是由timerFunc這個(gè)函數(shù)來進(jìn)行調(diào)用回調(diào), 那么我們下面來著重介紹這個(gè)函數(shù)，首先看下源碼

我們可以看到timerFunc在不同情況下不同的賦值情況

首先會(huì)判斷瀏覽器是否支持promise屬性, 如果支持, timerFunc就會(huì)被賦值成Promise，這里有個(gè)小小的問題，那就是在ios下，雖然是具備Pormise對象，并且會(huì)將它推入到microTask隊(duì)列里，但是隊(duì)列卻不會(huì)更新，這個(gè)時(shí)候需要添加一個(gè)macroTask來強(qiáng)制刷新microTask隊(duì)列

MutationObserver, 相信很多人并不清楚這個(gè)Api, 這是一個(gè)能夠監(jiān)聽DOM變化的API，并且屬于microTask, 優(yōu)先級低于Promise 在創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)后，手動(dòng)更改其文本節(jié)點(diǎn)來觸發(fā)microTask,

這里會(huì)有個(gè)小小的問題：

該文本節(jié)點(diǎn)渲染成功后,一定能代表其他的DOM渲染成功了嗎？

這是個(gè)備選方案, 主要還是因?yàn)樗且粋€(gè)微任務(wù)，所以才使用它，并不是因?yàn)樗O(jiān)聽了DOM

微任務(wù)都失敗后，退而求其次，選擇setImmediate, 這是一個(gè)只有高版本IE和Edge瀏覽器才可能擁有的API, 其主要是用于計(jì)算大量數(shù)據(jù)的時(shí)候使用

最后就是setTimeout

看到這里，你會(huì)不會(huì)有疑惑？

上面的代碼并沒有說明nextTick是在監(jiān)聽DOM更新后才執(zhí)行的？ What????當(dāng)時(shí)腦袋就duang了一下

那么接下來說的就是重中之重

DOM Tree的更新是實(shí)時(shí)的，DOM Tree的更新是實(shí)時(shí)的，DOM Tree的更新是實(shí)時(shí)的，重要的事說3遍，這意味著你無需去監(jiān)聽DOM 更新，你對DOM的操作是能夠?qū)崟r(shí)得到反饋的，上一行代碼操作了DOM，下一行就能獲取到

那么有人就會(huì)產(chǎn)生疑惑了， nextTick究竟是干嘛的?

nextTick的作用是將收集Watcher從隊(duì)列中一個(gè)個(gè)取出，并且更改數(shù)據(jù)，來一次性渲染DOM, 我們知道操作DOM的代價(jià)是昂貴的，瀏覽器打開一個(gè)網(wǎng)頁后會(huì)開啟一個(gè)進(jìn)程，進(jìn)程是由線程組成的，

1. GUI渲染線程
2. js引擎線程(主線程)
3. EventLoop輪訓(xùn)處理線程
4. 其他線程，例如網(wǎng)絡(luò)

跨線程操作代價(jià)是昂貴的，所以做到一次性渲染Dom,可以有效的優(yōu)化性能??！