成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue nextTixk與任務(wù)

leonardofed / 2807人閱讀

摘要：以上函數(shù)只有是將回調(diào)放進(jìn)隊(duì)列中，所以是最優(yōu)方案，只有在不存在的情況下才會(huì)走其他方法。也是將回調(diào)函數(shù)放進(jìn)中，優(yōu)點(diǎn)是不需要做超時(shí)檢測(cè)，目前只有瀏覽器實(shí)現(xiàn)。

js的macrotask和microtask

js每次事件循環(huán)只從macrotask中讀取一個(gè)并任務(wù)執(zhí)行，同一個(gè)事件循環(huán)會(huì)把microtask中的任務(wù)執(zhí)行完畢并且先于macrotask

為什么要將數(shù)據(jù)更新的處理函數(shù)放在microtask隊(duì)列中

兩個(gè)macrotask中可能穿插著ui重渲染，所以在microtask中在ui重渲染之前把所有的數(shù)據(jù)更新，一次渲染就能得到最新的DOM結(jié)構(gòu)，減少開銷;所以優(yōu)先把更新數(shù)據(jù)的操作放在microtask隊(duì)列中,批處理更新

vue中的nextTick的實(shí)現(xiàn)

vue中的nextTick根據(jù)瀏覽器的特性封裝，優(yōu)先級(jí)如下

[email protected]+ Promise > setImmediate > MessageChannel > setTimeout。

vue@<2.5 Promise > MutationObserver > setTimeout

Promise

以上函數(shù)只有Promise是將回調(diào)放進(jìn)microTak隊(duì)列中，所以是最優(yōu)方案，只有在Promise不存在的情況下才會(huì)走其他方法。

將setTimeout放到優(yōu)先級(jí)的最后的原因：

setimeout中的回調(diào)并不是放在microtask而是macrotask中，對(duì)于重渲染是有開銷的；

在回調(diào)之前要不斷做超時(shí)檢查, 用setTimeout最快也是4ms發(fā)以后調(diào)用回調(diào)

雖然setTimeout不是最優(yōu)方案但是可作為兼容性最好的方案

MessageChannel 和 MutationObserver

由于兼容性問題，vue2.5開始拋棄了MutationObserver

MessageChannel擁有port1，port2兩個(gè)屬性，讓其中一個(gè)port監(jiān)聽onMessage，另一個(gè)port發(fā)送消息即可，不需要像setTimeout做超時(shí)檢測(cè)，它作為非ie瀏覽器兼容方案。

onMessage回調(diào)會(huì)被注冊(cè)為macroTask。

setImmediate也是將回調(diào)函數(shù)放進(jìn)marcoTak中，優(yōu)點(diǎn)是不需要做超時(shí)檢測(cè)，目前只有ie瀏覽器實(shí)現(xiàn)。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97199.html

相關(guān)文章

  • 做面試的不倒翁：一道事件循環(huán)題引發(fā)的血案

    摘要：通過查看的文檔可以發(fā)現(xiàn)整個(gè)分為個(gè)階段定時(shí)器相關(guān)任務(wù)，中我們關(guān)注的是它會(huì)執(zhí)行和中到期的回調(diào)執(zhí)行某些系統(tǒng)操作的回調(diào)內(nèi)部使用執(zhí)行，一定條件下會(huì)在這個(gè)階段阻塞住執(zhí)行的回調(diào)如果或者關(guān)閉了，就會(huì)在這個(gè)階段觸發(fā)事件，執(zhí)行事件的回調(diào)的代碼在文件中。 showImg(https://segmentfault.com/img/bVbd7B7?w=1227&h=644); 這次我們就不要那么多前戲，直奔主題...

    ispring 評(píng)論0 收藏0

  • event loop 與 vue

    摘要：但是導(dǎo)致了很明顯的性能問題。上述兩個(gè)例子其實(shí)是在這個(gè)中找到的，第一個(gè)使用的版本是，這個(gè)版本的實(shí)現(xiàn)是采用了，而后因?yàn)榈睦锏挠?，于是尤雨溪更改了?shí)現(xiàn)，換成了，也就是后一個(gè)所使用的。后來尤雨溪了解到是將回調(diào)放入的隊(duì)列。 結(jié)論 對(duì)于event loop 可以抽象成一段簡(jiǎn)單的代碼表示 for (macroTask of macroTaskQueue) { // 1. Handle cur...

    springDevBird 評(píng)論0 收藏0

  • event loop 與 vue

    摘要：但是導(dǎo)致了很明顯的性能問題。上述兩個(gè)例子其實(shí)是在這個(gè)中找到的，第一個(gè)使用的版本是，這個(gè)版本的實(shí)現(xiàn)是采用了，而后因?yàn)榈睦锏挠校谑怯扔晗牧藢?shí)現(xiàn)，換成了，也就是后一個(gè)所使用的。后來尤雨溪了解到是將回調(diào)放入的隊(duì)列。 結(jié)論 對(duì)于event loop 可以抽象成一段簡(jiǎn)單的代碼表示 for (macroTask of macroTaskQueue) { // 1. Handle cur...

    Barry_Ng 評(píng)論0 收藏0

  • JavaScript Event Loop 機(jī)制詳解與 Vue.js 中實(shí)踐應(yīng)用

    摘要：機(jī)制詳解與中實(shí)踐應(yīng)用歸納于筆者的現(xiàn)代開發(fā)語法基礎(chǔ)與實(shí)踐技巧系列文章。事件循環(huán)機(jī)制詳解與實(shí)踐應(yīng)用是典型的單線程單并發(fā)語言，即表示在同一時(shí)間片內(nèi)其只能執(zhí)行單個(gè)任務(wù)或者部分代碼片。 JavaScript Event Loop 機(jī)制詳解與 Vue.js 中實(shí)踐應(yīng)用歸納于筆者的現(xiàn)代 JavaScript 開發(fā)：語法基礎(chǔ)與實(shí)踐技巧系列文章。本文依次介紹了函數(shù)調(diào)用棧、MacroTask 與 Micr...

    livem 評(píng)論0 收藏0

  • Vue: Binding與Watcher

    摘要：當(dāng)數(shù)據(jù)改變時(shí)，我們不需要直接觸發(fā)所有的回調(diào)函數(shù)，而是去通知對(duì)應(yīng)的數(shù)據(jù)的，然后由去執(zhí)行相應(yīng)的邏輯。對(duì)于其邏輯可能是一個(gè)指令用于連接與響應(yīng)式數(shù)據(jù)或者是一個(gè)偵聽器的回調(diào)函數(shù)，這樣就能符合單一職責(zé)原則，解除模塊之間的耦合度，讓程序更易維護(hù)。 前言 　　首先歡迎大家關(guān)注我的Github博客，也算是對(duì)我的一點(diǎn)鼓勵(lì)，畢竟寫東西沒法獲得變現(xiàn)，能堅(jiān)持下去也是靠的是自己的熱情和大家的鼓勵(lì)。接下來的日子我應(yīng)...

    tyheist 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<