event loop 與 vue

springDevBird 發(fā)布于2019-08-02 11:41 / 1116人閱讀

摘要：但是導(dǎo)致了很明顯的性能問題。上述兩個例子其實是在這個中找到的，第一個使用的版本是，這個版本的實現(xiàn)是采用了，而后因為的里的有，于是尤雨溪更改了實現(xiàn)，換成了，也就是后一個所使用的。后來尤雨溪了解到是將回調(diào)放入的隊列。

結(jié)論

對于event loop 可以抽象成一段簡單的代碼表示

for (macroTask of macroTaskQueue) {
    // 1. Handle current MACRO-TASK
    handleMacroTask();
      
    // 2. Handle all MICRO-TASK
    for (microTask of microTaskQueue) {
        handleMicroTask(microTask);
    }
}

js事件機制

javascript是一個單線程語言，同一時間只能執(zhí)行一個任務(wù)。
對于javascript的事件處理機制，我們可以簡單理解成“主線程+任務(wù)隊列”模式。主要步驟如下

（1）所有同步任務(wù)都在主線程上執(zhí)行，形成一個執(zhí)行棧。（2）主線程之外，還存在一個 "任務(wù)隊列"（task queue）。只要異步任務(wù)有了運行結(jié)果，就在 "任務(wù)隊列" 之中放置一個事件。 
（3）一旦 "執(zhí)行棧" 中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)就會讀取 "任務(wù)隊列"，看看里面有哪些事件。那些對應(yīng)的異步任務(wù)，于是結(jié)束等待狀態(tài)，進入執(zhí)行棧，開始執(zhí)行。
（4）主線程不斷重復(fù)上面的第三步。

任務(wù)隊列

任務(wù)隊列分為task queue和microtask queue。執(zhí)行棧任務(wù)清空后會先從Microtasks中取任務(wù)，Microtasks中執(zhí)行完之后才會執(zhí)行task中的任務(wù)。

因此一個event loop主要流程如下:

開始一個Event loop

執(zhí)行棧從tasks queue中取任務(wù)，并執(zhí)行。

執(zhí)行完后，執(zhí)行棧清空

執(zhí)行棧從microtasks queue中取任務(wù)執(zhí)行

執(zhí)行完成，執(zhí)行棧清空

判斷microtasks queue是否還有任務(wù)，有則重復(fù)步驟3。

進入 Update the rendering（更新渲染）階段

Event loop結(jié)束

流程圖如下：

再仔細理解一下開頭列出的代碼：

for (macroTask of macroTaskQueue) {
    // 1. Handle current MACRO-TASK
    handleMacroTask();
      
    // 2. Handle all MICRO-TASK
    for (microTask of microTaskQueue) {
        handleMicroTask(microTask);
    }
}

VUE與EVENT_LOOP 為什么使用Microtask queue

對于VUE這類web2.0框架而言，最主要做的應(yīng)該還是把對data的修改映射到DOM上。如果只修改一個數(shù)據(jù)，就刷新一次DOM，那么在一個同步過程中，同時修改好幾個數(shù)據(jù)，必然會導(dǎo)致多次渲染。這肯定是不可取的。
從上面的event loop我們了解到，一個event loop對應(yīng)一次render。理想狀況當(dāng)然就是，一次event loop產(chǎn)生的所有改動最好再render之前將DOM都先更新好。這樣在一個周期中就可以只render一次。

從這點需求出發(fā)很容易發(fā)現(xiàn)，microtask queue很符合要求。

microtask queue肯定在render ui之前執(zhí)行完

不像task queue存在多個，microtask只存在一個queue。

最關(guān)鍵的是: microtask queue只有都清空了才能進入下一步，無論queue里是什么時候塞進來的。

實際代碼中，不管是鼠標(biāo)點擊還是鍵盤輸入或是網(wǎng)絡(luò)時間，觸發(fā)了哪些方法，這些觸發(fā)都可以看成開啟一個event loop。這些觸發(fā)造成的任何修改都放到microtask queue中，就可以保證在這一輪的evnet loop走到render ui時可以拿到最新的DOM。

要說明的是，這里的render并不是維護虛擬DOM，也不是把虛擬DOM的變化投射到真實DOM上。而是將真實DOM更新到UI的過程。

這么說是因為：Event Loop 并不是在 ECMAScript 標(biāo)準(zhǔn)中定義的，而是在 HTML 標(biāo)準(zhǔn)中定義的：

To coordinate events, user interaction, scripts, rendering, networking, and so forth...

在 JavaScript Engine 中（以 V8 為例），只是實現(xiàn)了 ECMAScript 標(biāo)準(zhǔn)，而并不關(guān)心什么 Event Loop。也就是說 Event Loop 是屬于 JavaScript Runtime 的，是由宿主環(huán)境提供的（比如瀏覽器）。
瀏覽器可不會關(guān)心什么虛擬DOM。只負(fù)責(zé)DOM改變后渲染UI。

為什么不用task queue

同上：在開啟一個event loop后，如果將任務(wù)放到task queue中，那么這個task任務(wù)只會在本輪Event loop結(jié)束后才會執(zhí)行，并開啟新一輪event loop。這無疑會導(dǎo)致兩次render UI。
實際上，尤大為了修復(fù)一些bug，曾經(jīng)將VUE.nexttick用task queue實現(xiàn)。但是導(dǎo)致了很明顯的性能問題。
可以看看兩個列子：例一 , 例二
兩個fiddle的實現(xiàn)一模一樣，就是讓那個絕對定位的黃色元素起到一個fixed定位的效果：綁定scroll事件，每次滾動的時候，計算當(dāng)前滾動的位置并更改到那個絕對定位元素的top屬性上去。大家自己試試滾動幾下，對比下效果，你就會發(fā)現(xiàn)第一個fiddle中的黃元素是穩(wěn)定不動的，fixed很好。而后一個fiddle中就有問題了，黃色元素上下晃動，似乎跟不上我們scroll的節(jié)奏，總要慢一點，雖然最后停下滾動時位置是對的。

上述兩個例子其實是在這個issue中找到的，第一個jsfiddle使用的版本是Vue 2.0.0-rc.6，這個版本的nextTick實現(xiàn)是采用了MO，而后因為IOS9.3的WebView里的MO有bug，于是尤雨溪更改了實現(xiàn)，換成了window.postMessage，也就是后一個fiddle所使用的Vue 2.0.0-rc.7。后來尤雨溪了解到window.postMessage是將回調(diào)放入的macrotask 隊列。這就是問題的根源了。

參考：

Tasks, microtasks, queues and schedules

深入理解 JavaScript Event Loop

Vue源碼詳解之nextTick：MutationObserver只是浮云，microtask才是核心！

GPU云服務(wù)器云服務(wù)器 Event Loop VUE防抖與節(jié)流 Loops Loop

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/53049.html

發(fā)表評論

登陸后可評論

0條評論

springDevBird

男|高級講師

我要關(guān)注我要私信

TA的文章

JavaScript在web自動化測試中的作用

閱讀 3123·2021-11-25 09:43
[黑五]DediPath全場VPS/Hybrid Servers全部35折$1.2/月起,洛杉磯/圣

閱讀 1094·2021-11-24 10:22
云虛擬主機干什么用的-該怎么選擇合適自己的云虛擬主機？

閱讀 1438·2021-09-22 15:26
石家莊生育健康服務(wù)平臺項目

閱讀 751·2019-08-30 15:44
對Flex布局的總結(jié)與思考

閱讀 2544·2019-08-29 16:33
html2canvas使用中的坑

閱讀 3803·2019-08-26 18:42
canvas繪制圓形動畫圓角進度條

閱讀 973·2019-08-23 18:07
JS學(xué)習(xí)筆記【數(shù)據(jù)類型】的部分知識點

閱讀 1900·2019-08-23 17:55

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

event loop 與 vue

相關(guān)文章