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

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

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

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

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

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

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

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

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

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

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

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

針對(duì)前端表格開(kāi)發(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界面“假死”，界面操作不流暢等。

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

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

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

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

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

Canvas繪制模型

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

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

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

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

雙緩存畫布技術(shù)

為此，SpreadJS又引入了雙緩存畫布的機(jī)制，將不易改變的主體圖層繪制在緩存畫布中，在發(fā)生渲染行為時(shí)，只需要將緩存畫布中的主體圖層直接通過(guò)圖像克隆的方式繪制在主畫布上，并附加繪制裝飾圖層元素，便可大大優(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)過(guò)程更加流暢。

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

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

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

隨著前端工程化的高速發(fā)展，各種前端工程腳手架日漸成熟，WebComponent標(biāo)準(zhǔn)被提上日程，企業(yè)開(kāi)始由C/S向B/S應(yīng)用轉(zhuǎn)型。這就要求前端開(kāi)發(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)容是零散的，也就是說(shuō)在Sheet中會(huì)出現(xiàn)大量空單元格，而這些空單元格，同樣會(huì)占用內(nèi)存空間。

對(duì)于電子表格這種松散的文檔結(jié)構(gòu)，SpreadJS采用了稀疏矩陣存儲(chǔ)模型（Sparse Array)來(lái)保存數(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ù)開(kāi)辟額外的內(nèi)存空間。

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

借助這個(gè)特性，開(kāi)發(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ù)。

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

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

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

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

當(dāng)整個(gè)依賴鏈中的任意節(jié)點(diǎn)發(fā)生變化時(shí)，沿著這條依賴鏈，SpreadJS會(huì)查找依賴節(jié)點(diǎn)并進(jìn)行重算，這個(gè)過(guò)程中，沒(méi)有在依賴鏈中的節(jié)點(diǎn)是不會(huì)發(fā)生重算計(jì)算的，也就是我們所說(shuō)的臟值運(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ù)年來(lái)在表格控件的開(kāi)發(fā)技術(shù)和長(zhǎng)期服務(wù)于開(kāi)發(fā)者的經(jīng)驗(yàn)積累。

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

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

基于 SpreadJS 開(kāi)發(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ù)不一致、文件難以管理的問(wèn)題，還保留了 Excel 的數(shù)據(jù)計(jì)算能力，讓所有模板和數(shù)據(jù)均可在服務(wù)器中存儲(chǔ)并管理。