場景：

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

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

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

參考下面的代碼為

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

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

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

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

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

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

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

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

SpreadJS | 下載試用

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

本文轉(zhuǎn)載自