純前端表格控件SpreadJS，可滿足 .NET、Java、App 等應(yīng)用程序中的 Web Excel 組件開發(fā)、數(shù)據(jù)填報、在線文檔、圖表公式聯(lián)動、類 Excel UI 設(shè)計等業(yè)務(wù)場景，并在數(shù)據(jù)可視化、Excel 導(dǎo)入導(dǎo)出、公式引用、數(shù)據(jù)綁定、框架集成中無需大量代碼開發(fā)和測試，極大降低了企業(yè)研發(fā)成本和項目交付風險。

點擊下載SpreadJS最新試用版

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

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

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

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

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

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

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

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

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

 為了應(yīng)對這些技術(shù)難點，今天為你帶來一款可提升系統(tǒng)性能、可靠性，降低內(nèi)存消耗的純前端表格控件 —— SpreadJS。

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

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

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

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

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

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

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

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

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

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

Canvas繪制模型

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

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

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

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

雙緩存畫布技術(shù)

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

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

• 類似油畫的分層繪制

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

• 使用緩存畫布

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SpreadJS廣泛應(yīng)用于各行業(yè)企業(yè)信息化系統(tǒng)開發(fā)

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

以華為勘驗設(shè)計平臺的系統(tǒng)搭建為例：

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

（部分葡萄城合作客戶）

總結(jié)

今天的內(nèi)容就到這了，不要忘了在評論區(qū)留下的意見和建議！現(xiàn)電子表格控件SpreadJS正版授權(quán)限時優(yōu)惠！低至3490；企業(yè)版最高立減6000元。點擊了解更多優(yōu)惠！