高性能

在企業應用中，數據是唯一的主干。假如作為數據載體的表格性能低下，系統便會被“吐槽”卡頓、操作不流暢等問題，為此，任何基于表格開發的應用系統，必須滿足以最低的資源消耗，實現高速渲染、計算和頻繁刷新的效果。

對于在線系統而言，為了追求更好的用戶體驗，需要對 UI 界面反復優化，而頻繁的優化操作，將引發瀏覽器多次重繪。在這個過程中，UI 元素的創建及修改，會激活瀏覽器內部垃圾回收機制，影響數據處理效率。

基于此，電子表格系統的性能主要體現以下三個方面：

• 在當頁面從服務端下載了數據之后，表格是否能快速的呈現數據。
• 用戶滾動、操作時，表格是否流暢。
• 當表格中有篩選、排序，以及大數據量的數據透視時是否能快速完成。

為了解決這些問題，葡萄城表格組件引入了 Canvas 繪制模型和雙緩沖畫布渲染技術。

最新發布：葡萄城表格產品性能測試報告 模擬實際應用場景而設計的近 20 個性能測試用例，從執行時間、內存、文件體積等方面全面體現葡萄城產品的卓越性能。

Canvas 繪制模型

使用 Canvas 繪制，表格在頁面繪制過程中不僅無需重復創建和銷毀 DOM 元素，更是打破了 DOM 元素渲染對 UI 的諸多限制，可繪制種類更為豐富的 UI 元素，如線形、特殊圖形等，通過畫法邏輯，還可實現更加精準的UI界面渲染，解決了瀏覽器差異造成的樣式誤差。

（HTML5 Canvas 繪制表格）

雙緩存畫布渲染

葡萄城表格技術采用了類似油畫的分層繪制，即繪制引擎基于油畫的繪制原理，分為主體圖層和裝飾圖層，主體圖層渲染持久的、不易改變的元素，例如背景，單元格，表格線等。裝飾圖層則渲染常變性元素，如選擇框、拖拽框、懸浮效果等。當表格元素發生動態繪制，如表格滾動時， SpreadJS 會將主畫布清空，從緩存畫布中根據行為上下文進行畫布偏移，將偏移后的圖層直接繪制在主畫布上，再在主畫布上繪制剩余部分，使整個表格的滾動過程更加流暢。

（雙緩存畫布技術）

處理海量復雜數據

隨著前端工程化的高速發展，企業應用系統已經由 C/S 向 B/S 架構轉型，各種前端工程腳手架日漸成熟，WebComponent 標準也被提上日程，對于前端開發者來說，不僅需要面對單線程處理復雜業務數據的挑戰，還要從產品最開始設計以及運行時考慮內存的使用情況，盡可能的降低內存占用，防止頁面崩潰。

這里的復雜數據，不僅指的是數據量大，更是一種數據的處理狀態。為了追求更高效的數據前后端交互，并快速響應數據變更及數據回滾狀態，葡萄城改變了表格數據的存儲方式，由常規數組改為稀疏矩陣，這一點，確保了葡萄城表格技術產品足以輕松應對海量復雜數據的挑戰。

稀疏矩陣

相較于傳統的鏈式存儲或是數組存儲，稀疏矩陣存儲構建了基于行索引為 Key 的數據字典，在松散布局的表格數據中，稀疏矩陣只會對非空數據進行存儲，而不需要對空數據開辟額外的內存空間。使用這種特殊的存儲策略，使得數據片段化變得容易，可以隨時框取整個數據層中的一片數據，進行序列化或反序列化。

借用這一特性，葡萄城的 SpreadJS 和 GcExcel 表格組件可以隨時替換或恢復整個存儲結構中的任何一個級別的節點，以改變引用的方式更高效的解決表格數據回滾和恢復問題，而這一點也為葡萄城表格組件支持多人在線協同打下了一個良好的基礎。

此外，使用稀疏矩陣還帶來了一個優勢，葡萄城的表格組件在數據檢索遍歷時，無需判空，只要對有效數據校驗即可快速獲取想要的值。

（稀疏矩陣存儲策略）

計算公式引擎

除了應用于數據展示，表格更多的使用場景是處理計算問題，尤其在面對復雜公式時，表格需要提供更為可靠的計算結果。

因此，衡量表格組件能力的一個重要指標，就是在為應用程序實現類似 Excel 的公式函數時，能否正確的解析并計算結果，而看似簡單的 Excel 公式函數，卻具備高階編程語言的一切特性，如語法分析、解析、運算、執行等。

葡萄城的表格組件通過引入其自主研發的計算公式引擎，已做到兼容 450 多種 Excel 公式函數，并可輕松擴展，滿足用戶自定義、異步調用、跨表格引用等多場景計算需求。

表達式樹

葡萄城表格組件的計算引擎依托于一種表達式樹的結構類型，即當用戶設置一個公式到表格中，計算引擎會將其解析為一個中綴表達式，通過計算引擎的解析后，會在內存中以樹型結構進行存儲，這個樹型結構就是表達式樹。表達式樹的生成，是后續構建計算依賴鏈的關鍵。

當一個公式被解析為表達式樹后，計算引擎將根據運算上下文為其構建運算依賴鏈。運算依賴鏈的目的是為了按需計算，當表格內容發生變化時，只有被影響的表達式樹會進行運算，而運算的依據就是依賴鏈。

（葡萄城表格組件構建的公式依賴鏈）

如上圖所示，這是葡萄城表格組件的計算引擎在構建計算依賴鏈時的一個簡單的流程圖，表達式樹從計算存儲模型中找到對應的根節點以及根節點標識，隨后遍歷整個表達式樹，找出其他依賴標識，構建依賴關系。

當整個依賴鏈中的任意節點發生變化時，沿著這條依賴鏈，計算引擎會查找依賴節點并進行重算，這個過程中，沒有在依賴鏈中的節點是不會發生重算計算的，也就是我們所說的臟值運算。

正是利用這樣的機制，葡萄城的表格組件才得以大大提升了整個表格的運算速度，給用戶更好的使用體驗和更加精準的運算結果。

在線導入導出

SpreadJS 無需借助任何后臺代碼和第三方組件，便可直接在瀏覽器中完成 Excel、CSV、JSON 等文件的導入導出、PDF 導出、打印及預覽操作。

（在線導入導出 Excel 文件）

通過 SpreadJS 提供的設計器可以快速的進行模板設計，設計器中可以通過拖拽，點擊，配置等操作快速進行模板設置從而節省大量的代碼編輯操作。當在設計器中設計好模板之后可以通過設計器提供的導出功能，將模板導出成 ssjson 文件（該文件就是將序列化 toJSON 之后生成 JSON 格式保存成的文件）。

在頁面展示的時候我們可以在 js 中讀取該文件：

例如 jquery 的 \$.getJSON(“/xxx.ssjson”)

通過 js 文件讀取等方式，將獲取到的 json 對象通過 spread.fromJSON 反序列化成頁面展示，這樣就完成了模板的快速構建。

JSON 序列化與反序列化

• 通過序列化可以將當前的整個 Spread 序列化成為 JSON 格式進行存儲
• 通過反序列化可以將之前序列化的 JSON 格式的對象反序列化為頁面進行展示