SpreadJS 是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受以華為、蘇寧易購、天弘基金等為代表的企業用戶青睞。SpreadJS 為用戶帶來親切的 Excel 使用體驗的同時，滿足 Web Excel 組件開發、表格文檔協同編輯、數據填報、Excel 類報表設計等業務場景，極大降低了企業研發成本和項目交付風險。

點擊下載SpreadJS最新試用版

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

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

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

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

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

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

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

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

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

SpreadJS 的表格控件技術

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

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

基于雙緩存畫布繪制引擎，實現性能提升

在企業的應用中，數據是唯一的主干，而作為數據載體的表格，經常被“吐槽”卡頓，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會將主畫布清空，從緩存畫布中根據行為上下文進行畫布偏移，將偏移后的圖層直接繪制在主畫布上，再在主畫布上繪制剩余部分，使整個表格的滾動過程更加流暢。

基于行模式的稀松矩陣存儲策略，大幅節省內存消耗

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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