fre 的異步渲染（concurrent mode）

halo，你們好，我是 132 真的很久不見呢……

此次給你們帶來的是 fre v1.7 的異步渲染

異步渲染是一個很是厲害的東西，也是 react16 搞了三年，至今還沒正式肯定的

在這三年間，不斷更名，fiber增量渲染，async mode，時間切片，concurrent mode

反正最終都是沒有被肯定就是了

其實我最開始寫 fre 的時候，也是爲了搞清楚這玩意才寫的，雖然一直到 v1.7 才搞定

廢話很少說，直接上 demo～

codesandbox.io/s/suspiciou…

這個是 fre 的 rasmus 叔叔寫的用例，裏面有 react 和 preact 的依賴，能夠經過取消註釋來切換

你們能夠看到，使用 fre 進行異步渲染絲毫順滑，可是切換到 preact 等同步渲染的框架，就會明顯卡頓

這是三十個組件，能夠手動調整到一百個，二百個，一千個………………

真的會卡到懷疑人生，哈哈

固然，目前除了 fre 和 react，其餘全部框架都是同步渲染，都會這麼卡

什麼是異步渲染

其實瞭解 react 的應該都知道，異步渲染是一個優先級任務調度，高優先級任務會優先執行，低優先級任務會被打算，並能夠繼續和回退

這塊有不少文章介紹，就不用我多說啦

react 的異步渲染

react 的異步渲染，在以前是使用 requestAnimationFrame 實現的

requestAnimation 在重繪以前執行，而後，他會把更新遍歷的工做先放到 message channel（宏任務隊列）中，而後利用 rAF 和 MC 之間的閾值，來實現優先級調度

期間它須要根據時間進行幀率的動態計算，因此每次其實幀率都是不許確的，但都所差無幾，達到一個平衡狀態

我認爲這是一個不那麼好的實現，由於它須要計算幀和幀率，萬一碰上坑的電腦，卡那麼一下，就死定了

react v16.10 更新了這個算法，又更新了 API，將 concurrentMode 移除，如今更名叫 createRoot

import { unstable_createRoot } from "react-dom"

const root = unstable_createRoot(document.getElementById('root'))
root.render(<App />) 複製代碼

vue3 的時間切片

vue3 最近公開源碼，我也去看了下，其實時間切片是我最感興趣的部分

vue3 的實現原理是利用 promise 來作，它利用 promise 的等待行爲來模擬低優先級任務被打斷

固然 vue3 的實現其實仍是不夠的（只是組件級別），它天生沒有一個好的數據結構（鏈表），致使這種事情實現起來，不那麼優雅

fre 的異步渲染

以上，react 和 vue 兩種實現都不那麼靠譜的狀況下

fre 使用了新的思路，不使用 requestAnimationFrame 也不是 promise，它使用了 message channel，來儘量多執行低優先級任務

這個思路又完美，代碼量又小，又容易理解

fre 默認開啓了異步渲染，不須要額外的 API

總結

綜上所述，不一樣框架給出了不一樣的實現思路

但用例都是同樣的，除了 vue3 的不徹底實現最終沒有出如今 master 分支

fre 和 react 均可以用來應對大量數據的渲染

異步渲染對於框架而言，是很是重要的一環，雖然如今真正意義上支持異步渲染的框架只有 fre 和 react，但異步渲染是將傳統的 diff 算法性能對比的層面完全壟斷了

畢竟之前 diff 的時候，不管你算法多麼好，總有大量數據的狀況是搞不定的

如今小數量的數據，diff 算法不用寫的太厲害，也不會很卡，而大量數據有異步渲染，更是絲毫順滑

最終，fre v1.7 之後，兩個核心算法都穩定了，測試覆蓋率也達到了 80%（WIP）

如今 fre 的主要開發人員是兩人，rasmus 叔叔最近在作測試工做

歡迎試用與 star： github.com/132yse/fre

也歡迎加入咱們，一塊兒研究哈！