前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎(chǔ)是進階的前提是我的初心~

提到表格渲染大數(shù)據(jù)，為了不卡頓，很多人會選擇 虛擬滾動，但是很多人卻不知道，Canvas 就是天然的虛擬滾動！！！！！！

Canvas 表格王者 VTable

圖片

圖片

性能瓶頸突破

• 用戶體驗提升： 通過提升低配老舊機型的流暢度和減少卡頓，尤其是 FPS 接近滿幀的目標，顯著增強了用戶體驗。這可能涉及到硬件資源管理和渲染優(yōu)化
• 關(guān)鍵指標優(yōu)化： 頁面瀏覽體感耗時減少500ms，INP（輸入延遲）降低50%，這些優(yōu)化對于增強交互性和響應(yīng)速度是至關(guān)重要的，尤其是在用戶體驗上
• 內(nèi)存占用優(yōu)化： 通過將 canvas 渲染模型替代傳統(tǒng) DOM 渲染，減少內(nèi)存使用并提升回收效率。這意味著你們的渲染效率得到了優(yōu)化，并且內(nèi)存管理更為高效

動態(tài)功能 開箱即用

• 交互能力： 通過支持自動列寬、列拖拽調(diào)整、多級表頭、右鍵菜單等特性，提升了表格功能的開發(fā)效率。這種交互能力的增強對于用戶操作的靈活性和便利性至關(guān)重要
• 擴展?jié)摿Γ?nbsp;通過基于 VRender 的統(tǒng)一渲染引擎，支持與 VChart 同源的技術(shù)棧，進一步增強了數(shù)據(jù)可視化功能。這使得表格可以與圖表嵌套、數(shù)據(jù)上下鉆等 BI（商業(yè)智能）場景無縫結(jié)合，極大地擴展了功能的可拓展性

架構(gòu)解耦

• 技術(shù)債務(wù)清理： 通過適配層剝離舊組件庫的耦合，降低了代碼維護成本，并且減少了代碼量。這是一個非常重要的架構(gòu)優(yōu)化，能夠讓系統(tǒng)更具可維護性和靈活性
• 核心邏輯解耦： 通過設(shè)計 VTable API，實現(xiàn)了業(yè)務(wù)邏輯與 UI 渲染的解耦，并將事件、主題、數(shù)據(jù)加載等邏輯拆分為獨立模塊，分批注入。這樣能夠提升系統(tǒng)的可擴展性，確保每個模塊的獨立性與可維護性

渲染百萬數(shù)據(jù)，毫不卡頓

VTable 高性能揭秘 VRender 作為 VTable 的渲染引擎，通過按需重繪和合并異步渲染的能力，極大地提升了渲染性能，特別是在表格滾動等動態(tài)交互場景下。具體來說，按需重繪的機制與傳統(tǒng)的全量重繪方式相比，可以顯著提升渲染效率

圖片

Canvas VS DOM

圖片

選擇 VTable 的核心理由

• 場景： 業(yè)務(wù)場景適配，能解決核心痛點
• 性能： 性能表現(xiàn)優(yōu)異，內(nèi)存占用低，滾動和動態(tài)更新體驗流暢
• 功能： 豐富的開箱即用基礎(chǔ)功能，透視表及 BI 分析能力為后產(chǎn)品迭代有更好想象空間
• 生態(tài)： 作為VisActor家族一員，與其他生態(tài)內(nèi)產(chǎn)品深度聯(lián)動，拓展性更高

vTable 圖表案例

圖片

圖片

圖片

圖片