硬核乾貨：葡萄城 SpreadJS 前端表格技術分享

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。

表格作爲數據呈現的一種基本方式，在各類軟件系統都發揮着重要的作用。在移動互聯時代，即便再複雜的數據通過“表格”的整理，都可以清晰的呈現給用戶，並支持用戶從多個維度查看、篩選和修改。不論是應對文檔、報告、憑證，還是票據，表格都能夠附加存儲更多的樣式信息，尤其對離散式數據存儲更加高效。

如今，企業開始紛紛嘗試信息化轉型，前端、後端、中臺、雲，這些概念也逐漸變得家喻戶曉，在幾乎所有的B端產品中，表格都作爲一種交互式組件受到廣泛歡迎。

不過即便如此，表格也經常因爲樣式複雜、操作繁瑣等因素，在用戶使用時造成諸多體驗問題，尤其在Web項目中，表格技術時常受限於前端性能制約。

那麼，有沒有一種辦法，可以幫助開發者突破前端表格技術的困境，實現關鍵技術落地呢？

2020年6月30日，作爲全球領先的軟件開發技術提供商，葡萄城舉辦了“賦能·智變”線上品牌戰略發佈會。本次會議上，葡萄城正式發佈“賦能開發者”業務使命，並就前端表格開發等技術話題進行了分享。

前端表格爲開發者帶來的困擾

在C/S架構的應用程序中，表格類組件可以獲取更多資源支持，內存控制也更加直接。但是當企業進行B/S轉型時，前端表格卻面臨着諸多挑戰。

例如，多瀏覽器差異、瀏覽器沙箱機制、內存訪問受限、客戶端性能低下等。在駁雜且質量參差不齊的前端開發環境中，這些問題都會使我們在開發應用時，消耗大量的時間和重複編碼，而無法專注於核心業務。不但耗時、耗力，加劇軟件開發成本，更可能因爲外部環境的變更，使系統的穩定性受到衝擊，使後期維護成本飆升。

總結來說，開發前端表格主要有三個技術難點：性能、內存消耗和可靠性。

爲了應對這些技術難點，葡萄城結合了多年來的表格開發技術經驗，推出了一款可提升系統性能、可靠性，降低內存消耗的純前端表格控件 —— SpreadJS 。

葡萄城 SpreadJS 的表格控件技術

針對前端表格開發的三大技術難點：性能、內存消耗和可靠性，SpreadJS分別提出了應對措施：

基於雙緩存畫布繪製引擎，SpreadJS實現了極高的處理性能
基於行模式的稀鬆矩陣存儲策略，SpreadJS可大幅節省內存消耗
基於計算引擎技術，SpreadJS可實現穩定可靠的應用系統

1. 基於雙緩存畫布繪製引擎，實現性能提升

在企業的應用中，數據是唯一的主幹，而作爲數據載體的表格，經常被“吐槽”卡頓，UI界面“假死”，界面操作不流暢等。

引起這些問題的癥結在於瀏覽器渲染引擎的基礎原理：當界面元素越多，瀏覽器的渲染時間會顯著增長，內存消耗會越大。

舉例來說，現代應用程序爲了追求更好的用戶體驗，需要對UI界面反覆優化，而頻繁的修改界面UI元素，將引發多次瀏覽器重繪。在這個過程中，UI元素的創建及修改，會激活內部垃圾回收機制，影響數據處理效率。

除此之外，前端開發環境的多樣化、各類高DPI設備、手機、平板、4K顯示屏、企業大屏等，這些無不加重了企業應用系統的處理負擔。

對於經常用於展示大數據量的表格來說，性能至關重要。也就是說，任何基於表格開發的應用系統，必須滿足以最低的資源消耗，實現高速渲染和刷新。

爲此，SpreadJS 純前端表格控件引入了Canvas繪製模型和雙緩存畫布技術，具體實現方式如下。

Canvas 繪製模型

由於傳統的表格組件使用DOM的方式展示表格數據，無論在table，還是div中，複雜的UI都需要大量的DOM渲染。因此，在執行更新、滾動等操作時，需要不停的銷燬、創建DOM，這無形中增加了大量無效計算。

爲了解決這個問題，前端框架React和Vue3均採用了虛擬DOM的方式，而SpreadJS則採用了一種更爲先進的方式——HTML5 Canvas繪製。

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

但如果只使用一個畫布進行渲染，那麼每次繪製時，不論是主體圖層還是裝飾圖層，都需要通過畫法邏輯將所有元素進行繪製，這顯然是低效的。

雙緩存畫布技術

爲此，SpreadJS又引入了雙緩存畫布的機制，將不易改變的主體圖層繪製在緩存畫布中，在發生渲染行爲時，只需要將緩存畫布中的主體圖層直接通過圖像克隆的方式繪製在主畫布上，並附加繪製裝飾圖層元素，便可大大優化整個繪製性能。

SpreadJS雙緩存畫布的技術特點：

類似油畫的分層繪製

SpreadJS的繪製引擎基於油畫的繪製原理，分爲主體圖層和裝飾圖層，主體圖層渲染持久的、不易改變的元素，例如背景，單元格，表格線等。裝飾圖層則渲染常變性元素，如選擇框、拖拽框、懸浮效果等。

使用緩存畫布

當發生動態繪製，如表格滾動時，SpreadJS會將主畫布清空，從緩存畫布中根據行爲上下文進行畫布偏移，將偏移後的圖層直接繪製在主畫布上，再在主畫布上繪製剩餘部分，使整個表格的滾動過程更加流暢。

2. 基於行模式的稀鬆矩陣存儲策略，大幅節省內存消耗

雖然沒有明文規定，但在業界的共同認知裏，瀏覽器會對單一線程進行內存限制，例如64位的chrome，每個tab頁的內存消耗不允許超過4G，在手持設備上，這個限制則更爲明顯，例如iPhone 6s爲1G，而iPhone 7爲2G。

這個限制，在單頁面應用不成熟的十幾年前，不會成爲問題。因爲，那時大家所關注的，還是如何提升後端的處理性能，前端只是一種靜態的網頁表達方式。

隨着前端工程化的高速發展，各種前端工程腳手架日漸成熟，WebComponent標準被提上日程，企業開始由C/S向B/S應用轉型。這就要求前端開發者，需要面對單線程處理複雜業務數據的挑戰。這裏的複雜，不僅僅是數據量大，更是數據狀態的處理。如何高效的解決數據的前後端交互，如何快速響應數據變更及數據回滾呢？

爲此，SpreadJS又提出了一個行之有效的解決方案——稀鬆矩陣。

對於表格，常規的存儲方式是數組，如二維數組或對象數組。在類Excel的電子表格中，單元格內容是零散的，也就是說在Sheet中會出現大量空單元格，而這些空單元格，同樣會佔用內存空間。

對於電子表格這種鬆散的文檔結構，SpreadJS採用了稀疏矩陣存儲模型（Sparse Array)來保存數據。

相較於傳統的鏈式存儲或數組存儲，稀疏矩陣存儲構建了基於行索引的數據字典，在鬆散佈局的表格數據中，稀疏矩陣只會對非空數據進行存儲，而不需要對空數據開闢額外的內存空間。

這種特殊的存儲策略，不僅節省了內存消耗，也使得數據片段化變得更加容易。利用SpreadJS，可以隨時框取整個數據層中的一片數據，進行序列化或反序列化。

藉助這個特性，開發者甚至可以隨時替換或恢復整個存儲結構中的任何一個級別的節點，實現高效的數據回滾和數據恢復。

3. 支撐複雜邏輯運算的計算引擎，實現穩定可靠的應用系統

公式，是類Excel電子表格中的重要功能，其廣泛的應用於科學、財務、金融、製造等領域。SpreadJS支持450多種公式函數，同時還提供自定義公式和異步公式函數。

表面看似簡單的Excel公式，卻具備高階編程語言的一切特性，如語法分析、解析、運算、執行等。

當用戶設置一個公式到表格中，計算引擎會將其解析爲一箇中綴表達式，如公式“SUM(A1:B1, 3/E1, C1) + 2*(D1 - 1)”，當通過計算引擎的解析後，會在內存中以樹型結構進行存儲，這個樹型結構被我們稱爲表達式樹。表達式樹的生成，是後續構建計算依賴鏈的關鍵。

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

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

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

利用這樣的機制，SpreadJS大大提升了整個表格的運算速度，給用戶更好的使用體驗和更加精準的運算結果。

除了繪製引擎、存儲策略和計算引擎外，SpreadJS還實現了更多技術細節，例如觸摸支持、富文本支持、前端Excel導入導出、JSON存儲等，而這些技術點，承載了葡萄城數年來在表格控件的開發技術和長期服務於開發者的經驗積累。

SpreadJS廣泛應用於各行業企業信息化系統開發

目前，SpreadJS 已廣泛應用於各行業的信息化系統開發中，滿足表格文檔協同編輯、數據填報、類 Excel 報表設計等業務場景，幫助華爲、蘇寧易購、天弘基金、遠光軟件等各領域龍頭企業，搭建出功能和佈局均高度類似於 Excel的軟件系統，加速這類信息系統的交付。

以華爲勘驗設計平臺的系統搭建爲例：

基於 SpreadJS 開發的勘驗設計平臺，承載了華爲全球業務（基站）的規劃勘察設計任務，藉助 SpreadJS 跨平臺應用嵌入的特性，華爲將原先使用 Excel 作爲設計模板的方式升級爲在線填報，解決了模板不統一、用料數據不一致、文件難以管理的問題，還保留了 Excel 的數據計算能力，讓所有模板和數據均可在服務器中存儲並管理。