雖然就我們的經驗來說,通常 Rive 在渲染這部分,只要不要塞太多東西的話,不太會有效能的問題。但有一種情況是,一次渲染了一堆東西(Data Binding List component),例如一次渲染 5,000 個 todo 卡片之類的。在傳統的 web 前端,我們會做 virtual scroll,在 Rive 也有類似的東西,叫做 Virtualization。
要先注意的是,嚴格說起來,Virtualization 只有在 Data Binding 的 Lists 才會用到,其他地方不能用,或殊難想像會用到,這點要先說清楚。所以畫面上如果有很多個東西的話,最好做成 Data Binding 的 Lists。使用情境只有這一點要特別注意,其他部分都跟前端的 virtual scroll 差不多。
使用方法也很簡單,直接請設計師大大在 Editor 設定一下就好,前端這邊基本上不用做什麼。當然設計師不一定會有 virtual scroll 的概念(如果你家設計師大大有的話記得抱好他的大腿不要放),所以要稍微花一點時間解釋一下,考驗工程師說故事的能力。
當然身為一個堅持傳統古法手工藝的宜蘭傳藝中心網頁前端工程師表演者還是要說,就跟前幾天提過的一樣,Rive 效能的問題基本上跟健身一樣,健身七分吃三分練剩下九十趴靠打藥,效能七分靠前端三分靠裝置剩下九十趴靠設計師大大,這件事在 Virtualization 依然適用。如果真的遇到效能的問題,除了從程式面著手以外,也有其他方向,而且這些方向可能並不衝突,可以同時一起進行。
再說的更深一點,virtual scroll 有一些細節要處理,例如往前滑的時候等 API 或是渲染等太久,往回滑的時候可能又要重新渲染,或是滾動條亂跳,甚至搭配平滑滾動感覺又更惱人等等。這些細節在傳統的前端通常都已經發展出一套成熟的解決方案,直接找別人的套件用就好。但 Rive 還沒發展出這些東西,所以有遇到的話要自己處理,考驗大家手搓的功力。