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

點(diǎn)擊下載SpreadJS最新試用版

表格作為數(shù)據(jù)呈現(xiàn)的一種基本方式，在各類軟件系統(tǒng)都發(fā)揮著重要的作用。在移動(dòng)互聯(lián)時(shí)代，即便再復(fù)雜的數(shù)據(jù)通過“表格”的整理，都可以清晰的呈現(xiàn)給用戶，并支持用戶從多個(gè)維度查看、篩選和修改。不論是應(yīng)對(duì)文檔、報(bào)告、憑證，還是票據(jù)，表格都能夠附加存儲(chǔ)更多的樣式信息，尤其對(duì)離散式數(shù)據(jù)存儲(chǔ)更加高效。

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

不過即便如此，表格也經(jīng)常因?yàn)闃邮綇?fù)雜、操作繁瑣等因素，在用戶使用時(shí)造成諸多體驗(yàn)問題，尤其在Web項(xiàng)目中，表格技術(shù)時(shí)常受限于前端性能制約。

那么，有沒有一種辦法，可以幫助開發(fā)者突破前端表格技術(shù)的困境，實(shí)現(xiàn)關(guān)鍵技術(shù)落地呢？

2020 年 6 月 30 日，作為全球領(lǐng)先的軟件開發(fā)技術(shù)提供商，葡萄城舉辦了“賦能·智變”線上品牌戰(zhàn)略發(fā)布會(huì)。本次會(huì)議上，葡萄城正式發(fā)布“賦能開發(fā)者”業(yè)務(wù)使命，并就前端表格開發(fā)等技術(shù)話題進(jìn)行了分享。

前端表格為開發(fā)者帶來的困擾

在C/S架構(gòu)的應(yīng)用程序中，表格類組件可以獲取更多資源支持，內(nèi)存控制也更加直接。但是當(dāng)企業(yè)進(jìn)行B/S轉(zhuǎn)型時(shí)，前端表格卻面臨著諸多挑戰(zhàn)。

例如，多瀏覽器差異、瀏覽器沙箱機(jī)制、內(nèi)存訪問受限、客戶端性能低下等。在駁雜且質(zhì)量參差不齊的前端開發(fā)環(huán)境中，這些問題都會(huì)使我們?cè)陂_發(fā)應(yīng)用時(shí)，消耗大量的時(shí)間和重復(fù)編碼，而無法專注于核心業(yè)務(wù)。不但耗時(shí)、耗力，加劇軟件開發(fā)成本，更可能因?yàn)橥獠凯h(huán)境的變更，使系統(tǒng)的穩(wěn)定性受到?jīng)_擊，使后期維護(hù)成本飆升。

總結(jié)來說，開發(fā)前端表格主要有三個(gè)技術(shù)難點(diǎn)：性能、內(nèi)存消耗和可靠性。

SpreadJS 的表格控件技術(shù)

針對(duì)前端表格開發(fā)的三大技術(shù)難點(diǎn)：性能、內(nèi)存消耗和可靠性，SpreadJS分別提出了應(yīng)對(duì)措施：

• 基于雙緩存畫布繪制引擎，SpreadJS實(shí)現(xiàn)了極高的處理性能
• 基于行模式的稀松矩陣存儲(chǔ)策略，SpreadJS可大幅節(jié)省內(nèi)存消耗
• 基于計(jì)算引擎技術(shù)，SpreadJS可實(shí)現(xiàn)穩(wěn)定可靠的應(yīng)用系統(tǒng)

基于雙緩存畫布繪制引擎，實(shí)現(xiàn)性能提升

 在企業(yè)的應(yīng)用中，數(shù)據(jù)是唯一的主干，而作為數(shù)據(jù)載體的表格，經(jīng)常被“吐槽”卡頓，UI界面“假死”，界面操作不流暢等。

引起這些問題的癥結(jié)在于瀏覽器渲染引擎的基礎(chǔ)原理：當(dāng)界面元素越多，瀏覽器的渲染時(shí)間會(huì)顯著增長，內(nèi)存消耗會(huì)越大。

舉例來說，現(xiàn)代應(yīng)用程序?yàn)榱俗非蟾玫挠脩?體驗(yàn)，需要對(duì)UI界面反復(fù)優(yōu)化，而頻繁的修改界面UI元素，將引發(fā)多次瀏覽器重繪。在這個(gè)過程中，UI元素的創(chuàng)建及修改，會(huì)激活內(nèi)部垃圾回收機(jī)制，影響數(shù)據(jù)處理效率。

除此之外，前端開發(fā)環(huán)境的多樣化、各類高DPI設(shè)備、手機(jī)、平板、4K顯示屏、企業(yè)大屏等，這些無不加重了企業(yè)應(yīng)用系統(tǒng)的處理負(fù)擔(dān)。

對(duì)于經(jīng)常用于展示大數(shù)據(jù)量的表格來說，性能至關(guān)重要。也就是說，任何基于表格開發(fā)的應(yīng)用系統(tǒng)，必須滿足以最低的資源消耗，實(shí)現(xiàn)高速渲染和刷新。

為此，SpreadJS 純前端表格控件引入了Canvas繪制模型和雙緩存畫布技術(shù)，具體實(shí)現(xiàn)方式如下。

Canvas繪制模型

由于傳統(tǒng)的表格組件使用DOM的方式展示表格數(shù)據(jù)，無論在table，還是div中，復(fù)雜的UI都需要大量的DOM渲染。因此，在執(zhí)行更新、滾動(dòng)等操作時(shí)，需要不停的銷毀、創(chuàng)建DOM，這無形中增加了大量無效計(jì)算。

為了解決這個(gè)問題，前端框架React和Vue3均采用了虛擬DOM的方式，而SpreadJS則采用了一種更為先進(jìn)的方式——HTML5 Canvas繪制。

使用Canvas繪制，SpreadJS不僅無需重復(fù)創(chuàng)建和銷毀DOM元素，在畫布的繪制過程中，更是打破了DOM元素渲染對(duì)UI的諸多限制。SpreadJS可以繪制種類更為豐富的UI元素，如線形、特殊圖形等，通過畫法邏輯，還可以實(shí)現(xiàn)更加精準(zhǔn)的UI界面渲染，解決了瀏覽器差異造成的樣式誤差。

但如果只使用一個(gè)畫布進(jìn)行渲染，那么每次繪制時(shí)，不論是主體圖層還是裝飾圖層，都需要通過畫法邏輯將所有元素進(jìn)行繪制，這顯然是低效的。

雙緩存畫布技術(shù)

為此，SpreadJS又引入了雙緩存畫布的機(jī)制，將不易改變的主體圖層繪制在緩存畫布中，在發(fā)生渲染行為時(shí)，只需要將緩存畫布中的主體圖層直接通過圖像克隆的方式繪制在主畫布上，并附加繪制裝飾圖層元素，便可大大優(yōu)化整個(gè)繪制性能。

SpreadJS雙緩存畫布的技術(shù)特點(diǎn)：

• 類似油畫的分層繪制

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

• 使用緩存畫布

當(dāng)發(fā)生動(dòng)態(tài)繪制，如表格滾動(dòng)時(shí)，SpreadJS會(huì)將主畫布清空，從緩存畫布中根據(jù)行為上下文進(jìn)行畫布偏移，將偏移后的圖層直接繪制在主畫布上，再在主畫布上繪制剩余部分，使整個(gè)表格的滾動(dòng)過程更加流暢。

基于行模式的稀松矩陣存儲(chǔ)策略，大幅節(jié)省內(nèi)存消耗

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

這個(gè)限制，在單頁面應(yīng)用不成熟的十幾年前，不會(huì)成為問題。因?yàn)椋菚r(shí)大家所關(guān)注的，還是如何提升后端的處理性能，前端只是一種靜態(tài)的網(wǎng)頁表達(dá)方式。

隨著前端工程化的高速發(fā)展，各種前端工程腳手架日漸成熟，WebComponent標(biāo)準(zhǔn)被提上日程，企業(yè)開始由C/S向B/S應(yīng)用轉(zhuǎn)型。這就要求前端開發(fā)者，需要面對(duì)單線程處理復(fù)雜業(yè)務(wù)數(shù)據(jù)的挑戰(zhàn)。這里的復(fù)雜，不僅僅是數(shù)據(jù)量大，更是數(shù)據(jù)狀態(tài)的處理。如何高效的解決數(shù)據(jù)的前后端交互，如何快速響應(yīng)數(shù)據(jù)變更及數(shù)據(jù)回滾呢？

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

對(duì)于表格，常規(guī)的存儲(chǔ)方式是數(shù)組，如二維數(shù)組或?qū)ο髷?shù)組。在類Excel的電子表格中，單元格內(nèi)容是零散的，也就是說在Sheet中會(huì)出現(xiàn)大量空單元格，而這些空單元格，同樣會(huì)占用內(nèi)存空間。

對(duì)于電子表格這種松散的文檔結(jié)構(gòu)，SpreadJS采用了稀疏矩陣存儲(chǔ)模型（Sparse Array)來保存數(shù)據(jù)。

相較于傳統(tǒng)的鏈?zhǔn)酱鎯?chǔ)或數(shù)組存儲(chǔ)，稀疏矩陣存儲(chǔ)構(gòu)建了基于行索引的數(shù)據(jù)字典，在松散布局的表格數(shù)據(jù)中，稀疏矩陣只會(huì)對(duì)非空數(shù)據(jù)進(jìn)行存儲(chǔ)，而不需要對(duì)空數(shù)據(jù)開辟額外的內(nèi)存空間。

這種特殊的存儲(chǔ)策略，不僅節(jié)省了內(nèi)存消耗，也使得數(shù)據(jù)片段化變得更加容易。利用SpreadJS，可以隨時(shí)框取整個(gè)數(shù)據(jù)層中的一片數(shù)據(jù)，進(jìn)行序列化或反序列化。

借助這個(gè)特性，開發(fā)者甚至可以隨時(shí)替換或恢復(fù)整個(gè)存儲(chǔ)結(jié)構(gòu)中的任何一個(gè)級(jí)別的節(jié)點(diǎn)，實(shí)現(xiàn)高效的數(shù)據(jù)回滾和數(shù)據(jù)恢復(fù)。

支撐復(fù)雜邏輯運(yùn)算的計(jì)算引擎，實(shí)現(xiàn)穩(wěn)定可靠的應(yīng)用系統(tǒng)

公式，是類Excel電子表格中的重要功能，其廣泛的應(yīng)用于科學(xué)、財(cái)務(wù)、金融、制造等領(lǐng)域。SpreadJS支持450多種公式函數(shù)，同時(shí)還提供自定義公式和異步公式函數(shù)。

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

當(dāng)用戶設(shè)置一個(gè)公式到表格中，計(jì)算引擎會(huì)將其解析為一個(gè)中綴表達(dá)式，如公式“SUM(A1:B1, 3/E1, C1) + 2*(D1 - 1)”，當(dāng)通過計(jì)算引擎的解析后，會(huì)在內(nèi)存中以樹型結(jié)構(gòu)進(jìn)行存儲(chǔ)，這個(gè)樹型結(jié)構(gòu)被我們稱為表達(dá)式樹。表達(dá)式樹的生成，是后續(xù)構(gòu)建計(jì)算依賴鏈的關(guān)鍵。

當(dāng)一個(gè)公式被解析為表達(dá)式樹后，計(jì)算引擎將根據(jù)運(yùn)算上下文為其構(gòu)建運(yùn)算依賴鏈。運(yùn)算依賴鏈的目的是為了按需計(jì)算，當(dāng)表格內(nèi)容發(fā)生變化時(shí)，只有被影響的表達(dá)式樹會(huì)進(jìn)行運(yùn)算，而運(yùn)算的依據(jù)就是依賴鏈。

如上圖所示，這是SpreadJS的計(jì)算引擎在構(gòu)建計(jì)算依賴鏈時(shí)的一個(gè)簡單的流程圖，表達(dá)式樹從計(jì)算存儲(chǔ)模型中找到對(duì)應(yīng)的根節(jié)點(diǎn)以及根節(jié)點(diǎn)標(biāo)識(shí)，隨后遍歷整個(gè)表達(dá)式樹，找出其他依賴標(biāo)識(shí)，構(gòu)建依賴關(guān)系。

當(dāng)整個(gè)依賴鏈中的任意節(jié)點(diǎn)發(fā)生變化時(shí)，沿著這條依賴鏈，SpreadJS會(huì)查找依賴節(jié)點(diǎn)并進(jìn)行重算，這個(gè)過程中，沒有在依賴鏈中的節(jié)點(diǎn)是不會(huì)發(fā)生重算計(jì)算的，也就是我們所說的臟值運(yùn)算。

利用這樣的機(jī)制，SpreadJS大大提升了整個(gè)表格的運(yùn)算速度，給用戶更好的使用體驗(yàn)和更加精準(zhǔn)的運(yùn)算結(jié)果。

除了繪制引擎、存儲(chǔ)策略和計(jì)算引擎外，SpreadJS還實(shí)現(xiàn)了更多技術(shù)細(xì)節(jié)，例如觸摸支持、富文本支持、前端Excel導(dǎo)入導(dǎo)出、JSON存儲(chǔ)等，而這些技術(shù)點(diǎn)，承載了葡萄城數(shù)年來在表格控件的開發(fā)技術(shù)和長期服務(wù)于開發(fā)者的經(jīng)驗(yàn)積累。

目前，SpreadJS 已廣泛應(yīng)用于各行業(yè)的信息化系統(tǒng)開發(fā)中，滿足表格文檔協(xié)同編輯、 數(shù)據(jù)填報(bào)、 類 Excel 報(bào)表設(shè)計(jì)等業(yè)務(wù)場景，幫助華為、蘇寧易購、天弘基金、遠(yuǎn)光軟件等各領(lǐng)域龍頭企業(yè)，搭建出功能和布局均高度類似于 Excel的軟件系統(tǒng)，加速這類信息系統(tǒng)的交付。

以華為勘驗(yàn)設(shè)計(jì)平臺(tái)的系統(tǒng)搭建為例：

基于 SpreadJS 開發(fā)的勘驗(yàn)設(shè)計(jì)平臺(tái)，承載了華為全球業(yè)務(wù)（基站）的規(guī)劃勘察設(shè)計(jì)任務(wù)，借助 SpreadJS 跨平臺(tái)應(yīng)用嵌入的特性，華為將原先使用 Excel 作為設(shè)計(jì)模板的方式升級(jí)為在線填報(bào)，解決了模板不統(tǒng)一、用料數(shù)據(jù)不一致、文件難以管理的問題，還保留了 Excel 的數(shù)據(jù)計(jì)算能力，讓所有模板和數(shù)據(jù)均可在服務(wù)器中存儲(chǔ)并管理。