場景：

1. 在許多用戶的實際應(yīng)用場景中，常常需要加載幾種表單：1)數(shù)據(jù)量大；2)公式多且復雜。在這些常見的場景中往往需要較多的時間去加載表單，導致每次都需要等待較長的時間，用戶體驗較差。
2. 需要做大量的繪制操作時，表單出現(xiàn)“假死”的情況。
3. 較大數(shù)據(jù)量的表單下，需要將全部單元格進行自適應(yīng)。

場景1的優(yōu)化：

1. 對于表單的性能表現(xiàn)，我們也在不斷地優(yōu)化，每個版本我們也會針對一些典型的用戶場景進行優(yōu)化，所以新版本會相對于前面的版本性能會有所提升。例如，同一份表單在v11和v14的加載速度也會有所不同。因此，當我們使用的版本相對較舊時，最直接的方案就是升級產(chǎn)品版本。
2. 無論是導入Excel還是導入json，其本質(zhì)都是調(diào)用fromJSON將表單反序列化。在默認情況下，為保證數(shù)據(jù)完整和正確，SpreadJS會自動重算所有公式。因此我們可以通過下面幾個屬性來優(yōu)化記載性能。
   1. 在fromJSON的時候，設(shè)置doNotRecalculateAfterLoad以及incrementalLoading這兩屬性，前者可以告知SpreadJS，不需要在導入后執(zhí)行重算。開啟了這個屬性也不用擔心，因為正常情況下，無論是Excel還是SpreadJS，公式計算默認都是實時生效的，因此在導入文檔時文檔數(shù)據(jù)已經(jīng)是統(tǒng)一并正確的。后者是v14新增的屬性，名為增量加載，通過改屬性將在后臺加載值和公式時快速顯示數(shù)據(jù)，減少用戶的首屏等待時間。可以參考學習指南。

參考下面的代碼為

spread.fromJSON(workbookObj, {
doNotRecalculateAfterLoad:true,
incrementalLoading: true
});

由于前端性能的限制，在一些比較極端的情況下（百萬級別甚至千萬級別的公式樣式），即使用Excel打開都需要花費大量的時間，那么我們只關(guān)心最后展示的數(shù)據(jù)，可以用下面的屬性將樣式和公式忽略掉。

spread.fromJSON(workbookObj, {
ignoreFormula: true,
ignoreStyle: true
});

1. Workbook的calcOnDemand配置：使用如這句代碼所示spread.options.calcOnDemand = true;設(shè)置這個屬性后告訴計算引擎，按需求執(zhí)行計算，而不是每次有數(shù)據(jù)改變都重算所有的公式，同時可以配合上面的option一起使用。

場景2的優(yōu)化：

對于需要一次大量繪制的情況，可以使用suspendPaint / resumePaint函數(shù)來加速渲染性能。

場景3的優(yōu)化：

在這種場景下，與繪制不一樣的是，AutoFitRow應(yīng)該考慮所有可見和不可見的單元格，然后獲取getText（getValue+format），考慮SPAN，考慮高優(yōu)先級選項，以及很多復雜的邏輯，在目前沒有太大的空間來提升。在這種情況下，一次自適應(yīng)大量的單元格，這確實需要花費較多的時間。根據(jù)數(shù)據(jù)集的大小，越大的數(shù)據(jù)集也會花費更多的時間。但是，如果只是需要顯示的時候自適應(yīng)可以使用附件的workaround。

SpreadJS | 下載試用

純前端表格控件SpreadJS，兼容 450 種以上的 Excel 公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產(chǎn)品特性，備受華為、蘇寧易購、天弘基金等行業(yè)龍頭企業(yè)的青睞，并被中國軟件行業(yè)協(xié)會認定為“中國優(yōu)秀軟件產(chǎn)品”。SpreadJS 可為用戶提供類 Excel 的功能，滿足表格文檔協(xié)同編輯、 數(shù)據(jù)填報、 類 Excel 報表設(shè)計等業(yè)務(wù)場景需求，極大的降低企業(yè)研發(fā)成本和項目交付風險。

本文轉(zhuǎn)載自