Vue nextTixk與任務

leonardofed 發布于2019-08-23 11:36 / 2800人閱讀

摘要：以上函數只有是將回調放進隊列中，所以是最優方案，只有在不存在的情況下才會走其他方法。也是將回調函數放進中，優點是不需要做超時檢測，目前只有瀏覽器實現。

js的macrotask和microtask

js每次事件循環只從macrotask中讀取一個并任務執行，同一個事件循環會把microtask中的任務執行完畢并且先于macrotask

為什么要將數據更新的處理函數放在microtask隊列中

兩個macrotask中可能穿插著ui重渲染，所以在microtask中在ui重渲染之前把所有的數據更新，一次渲染就能得到最新的DOM結構，減少開銷;所以優先把更新數據的操作放在microtask隊列中,批處理更新

vue中的nextTick的實現

vue中的nextTick根據瀏覽器的特性封裝，優先級如下

vue@2.5+ Promise > setImmediate > MessageChannel > setTimeout。

vue@<2.5 Promise > MutationObserver > setTimeout

Promise

以上函數只有Promise是將回調放進microTak隊列中，所以是最優方案，只有在Promise不存在的情況下才會走其他方法。

將setTimeout放到優先級的最后的原因：

setimeout中的回調并不是放在microtask而是macrotask中，對于重渲染是有開銷的；

在回調之前要不斷做超時檢查, 用setTimeout最快也是4ms發以后調用回調

雖然setTimeout不是最優方案但是可作為兼容性最好的方案

MessageChannel 和 MutationObserver

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

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

onMessage回調會被注冊為macroTask。

setImmediate也是將回調函數放進marcoTak中，優點是不需要做超時檢測，目前只有ie瀏覽器實現。

云服務器 GPU云服務器定時任務與觸發任務 VUE防抖與節流 nextTixk Vue_Vue

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97199.html

做面試的不倒翁：一道事件循環題引發的血案

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

ispring 2019-08-23 12:17 評論0 收藏0
event loop 與 vue

摘要：但是導致了很明顯的性能問題。上述兩個例子其實是在這個中找到的，第一個使用的版本是，這個版本的實現是采用了，而后因為的里的有，于是尤雨溪更改了實現，換成了，也就是后一個所使用的。后來尤雨溪了解到是將回調放入的隊列。結論對于event loop 可以抽象成一段簡單的代碼表示 for (macroTask of macroTaskQueue) { // 1. Handle cur...

springDevBird 2019-08-02 11:41 評論0 收藏0
event loop 與 vue

摘要：但是導致了很明顯的性能問題。上述兩個例子其實是在這個中找到的，第一個使用的版本是，這個版本的實現是采用了，而后因為的里的有，于是尤雨溪更改了實現，換成了，也就是后一個所使用的。后來尤雨溪了解到是將回調放入的隊列。結論對于event loop 可以抽象成一段簡單的代碼表示 for (macroTask of macroTaskQueue) { // 1. Handle cur...

Barry_Ng 2019-08-23 12:19 評論0 收藏0
JavaScript Event Loop 機制詳解與 Vue.js 中實踐應用

摘要：機制詳解與中實踐應用歸納于筆者的現代開發語法基礎與實踐技巧系列文章。事件循環機制詳解與實踐應用是典型的單線程單并發語言，即表示在同一時間片內其只能執行單個任務或者部分代碼片。 JavaScript Event Loop 機制詳解與 Vue.js 中實踐應用歸納于筆者的現代 JavaScript 開發：語法基礎與實踐技巧系列文章。本文依次介紹了函數調用棧、MacroTask 與 Micr...

livem 2019-08-21 16:19 評論0 收藏0
Vue: Binding與Watcher

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

tyheist 2019-08-26 12:09 評論0 收藏0