在日常工作中，有時(shí)會(huì)遇到一次性往頁(yè)面中插入大量數(shù)據(jù)的場(chǎng)景，在數(shù)棧的離線開發(fā)（以下簡(jiǎn)稱離線）產(chǎn)品中，就有類似的場(chǎng)景。本文將通過分享一個(gè)實(shí)際場(chǎng)景中的前端開發(fā)思路，介紹當(dāng)遇到大量數(shù)據(jù)時(shí)，如何實(shí)現(xiàn)高效的數(shù)據(jù)渲染，以達(dá)到提升頁(yè)面性能和用戶體驗(yàn)的目的。

渲染大數(shù)據(jù)量時(shí)遇到的問題

在離線的數(shù)據(jù)開發(fā)模塊，用戶可以在 SQL 編輯器中編寫 SQL，再通過整段運(yùn)行/分段運(yùn)行來(lái)執(zhí)行 SQL。在點(diǎn)擊整段運(yùn)行后，從運(yùn)行成功日志打印后到展示結(jié)果的過程中，有一段時(shí)間頁(yè)面會(huì)很卡頓，主要表現(xiàn)為編輯器編寫卡頓。

我們是在解決 SQL 最大運(yùn)行行數(shù)問題時(shí)，發(fā)現(xiàn)了上述需要進(jìn)行性能優(yōu)化的場(chǎng)景。

先來(lái)梳理下當(dāng)前代碼的設(shè)計(jì)邏輯：

· 前端將選中的 SQL 傳遞給服務(wù)端，服務(wù)端返回一個(gè)調(diào)度運(yùn)行的 jobId

· 前端接著以該 jobId 輪詢服務(wù)端，查詢?nèi)蝿?wù)的執(zhí)行狀態(tài)

· 當(dāng)輪詢到任務(wù)已完成時(shí)，選中的 SQL 中如果有查詢語(yǔ)句，服務(wù)端則會(huì)按 select 語(yǔ)句的順序返回一個(gè) sqlId 的數(shù)組集合

· 前端基于n個(gè) sqlId 的集合，并發(fā) n個(gè) selectData 的請(qǐng)求

· 所有的 selectData 請(qǐng)求完成后渲染數(shù)據(jù)

為了保證結(jié)果最終的展示順序和 select 語(yǔ)句順序一致，我們?yōu)閱渭兊?sqlIdList 循環(huán)方法加上了 Promise.allsettled 的方法，使得n個(gè) selectData 的請(qǐng)求順序和 select 語(yǔ)句順序一致。

由上述邏輯可以看出，問題可能出現(xiàn)在如果選中的 SQL 中有大量 select 語(yǔ)句的話，會(huì)在「整段運(yùn)行」完成后大批量請(qǐng)求 selectData 接口，再等待所有 selectData 請(qǐng)求完成后，集中進(jìn)行渲染。此時(shí)，就會(huì)出現(xiàn)一次性往頁(yè)面中插入大量數(shù)據(jù)的場(chǎng)景，導(dǎo)致卡頓。那么，我們?cè)趺唇鉀Q上述問題呢？

解決思路

可以看出，上述邏輯主要有兩個(gè)問題：大批量請(qǐng)求 selectData 接口和集中性數(shù)據(jù)渲染。我們通過如下所示的解決思路去處理這些問題。

任務(wù)分組

依舊通過 Promise.allsettled 拿到所有 selectData 接口返回的結(jié)果，將原先集中渲染看作是一個(gè)大任務(wù)，我們將任務(wù)拆分成單個(gè)的 selectData 結(jié)果渲染任務(wù)。再根據(jù)實(shí)際情況，對(duì)單個(gè)任務(wù)進(jìn)行分組，比如兩個(gè)一組，渲染完一組再渲染下一組。

拆分完任務(wù)，就涉及到了任務(wù)的優(yōu)先級(jí)問題，優(yōu)先級(jí)決定了哪個(gè)任務(wù)先執(zhí)行。這里采用最原始的“搶占式輪轉(zhuǎn)”，按 sqlIdList 的順序保留編輯器中的 SQL 順序。

請(qǐng)求分組 + 任務(wù)分組

問題中的大批量請(qǐng)求 selectData 接口，也是一個(gè)突破點(diǎn)。我們可以將請(qǐng)求進(jìn)行分組，每次以固定數(shù)量的 sqlId 去請(qǐng)求 selectData 接口，比如每組請(qǐng)求 6 個(gè) sqlId 的結(jié)果，當(dāng)前組的請(qǐng)求全部結(jié)束后再進(jìn)行渲染。為了保證效果最優(yōu)，這里也引入任務(wù)分組的思路。

請(qǐng)求分組

上一種方案的代碼相對(duì)來(lái)說(shuō)又些難以理解，屬于上午寫，下午忘的邏輯，注釋也不好寫，不利于維護(hù)。基于實(shí)際情況，我們嘗試下僅對(duì)請(qǐng)求作分組處理，看看效果。

解決思路解析

· 解決大數(shù)據(jù)量渲染的問題，常見方法有：時(shí)間分片、虛擬列表等

· 解決同步阻塞的問題，常見方法有：任務(wù)分解、異步等

· 如果某個(gè)任務(wù)執(zhí)行時(shí)間較長(zhǎng)的話，從優(yōu)化的角度，我們通常會(huì)考慮將該任務(wù)分解成一系列的子任務(wù)

在任務(wù)分組一節(jié)，我們將 setTimeout 的時(shí)間間隔設(shè)置為 100ms，也就是我認(rèn)為最快在 100ms 內(nèi)能完成渲染。但假設(shè)不到 100ms 就完成了渲染，那么就需要白白等待一段時(shí)間，這是沒有必要的，這時(shí)可以考慮 window.requestAnimationFrame 方法。

第三節(jié)的請(qǐng)求分組，實(shí)際上已經(jīng)達(dá)到了渲染任務(wù)分組的效果。本文更多的是提供一個(gè)解決思路，上述方式也是基于對(duì)時(shí)間分片的理解實(shí)踐。

在軟件開發(fā)中，性能優(yōu)化是一個(gè)重要的方面，但并不是唯一追求，往往還需要考慮多個(gè)因素，包括功能需求、可維護(hù)性、安全性等等。根據(jù)具體情況，綜合使用多種技術(shù)和策略，找到最佳的解決方案，才是最終目的。

《數(shù)據(jù)治理行業(yè)實(shí)踐白皮書》下載地址：https://fs80.cn/l134d5?

《數(shù)棧V6.0產(chǎn)品白皮書》下載地址：https://fs80.cn/cw0iw1

想了解或咨詢更多有關(guān)袋鼠云大數(shù)據(jù)產(chǎn)品、行業(yè)解決方案、客戶案例的朋友，瀏覽袋鼠云官網(wǎng)：https://www.dtstack.com/?src=szbzhan

同時(shí)，歡迎對(duì)大數(shù)據(jù)開源項(xiàng)目有興趣的同學(xué)加入「袋鼠云開源框架釘釘技術(shù) qun」，交流最新開源技術(shù)信息，qun 號(hào)碼：30537511，項(xiàng)目地址：https://github.com/DTStack