首頁(yè) 猿問(wèn) 如何在龐大的數(shù)據(jù)集（angular...

如何在龐大的數(shù)據(jù)集（angular.js）上提高ngRepeat的性能？

JavaScript AngularJS

ibeautiful 2019-10-14 11:07:00

我有一個(gè)巨大的數(shù)據(jù)集，其中包含數(shù)千行，每個(gè)行有大約10個(gè)字段，大約2MB的數(shù)據(jù)。我需要在瀏覽器中顯示它。最簡(jiǎn)單的方法（獲取數(shù)據(jù)，將其放入$scope，ng-repeat=""完成工作）可以很好地工作，但是當(dāng)它開(kāi)始將節(jié)點(diǎn)插入DOM時(shí)，它會(huì)使瀏覽器凍結(jié)大約半分鐘。我應(yīng)該如何解決這個(gè)問(wèn)題？一種選擇是將行逐行追加，$scope并等待ngRepeat完成向DOM中插入一個(gè)塊后再移至下一個(gè)。但是AFAIK ngRepeat在完成“重復(fù)”操作時(shí)不會(huì)返回報(bào)告，因此會(huì)很丑陋。另一種選擇是將服務(wù)器上的數(shù)據(jù)拆分為頁(yè)面，然后在多個(gè)請(qǐng)求中獲取它們，但這更加丑陋。我瀏覽了Angular文檔以查找類似的內(nèi)容ng-repeat="data in dataset" ng-repeat-steps="500"，但未找到任何內(nèi)容。我對(duì)Angular的方法還很陌生，所以有可能我完全忘記了要點(diǎn)。最佳做法是什么？

查看完整描述

3 回答

偶然的你

TA貢獻(xiàn)1841條經(jīng)驗(yàn) 獲得超3個(gè)贊

lonic的collectionRepeat指令和類似的其他實(shí)現(xiàn)方法體現(xiàn)了最熱且可以說(shuō)是最具擴(kuò)展性的方法來(lái)克服大型數(shù)據(jù)集的這些挑戰(zhàn)。一個(gè)比較好的術(shù)語(yǔ)是“遮擋剔除”，但您可以將其總結(jié)為：不要僅僅將呈現(xiàn)的DOM元素的數(shù)量限制為任意（但仍然很高）的分頁(yè)數(shù)，例如50、100、500 ... ，只能將其限制為用戶可以看到的盡可能多的元素。

如果執(zhí)行類似“無(wú)限滾動(dòng)”的操作，則可以減少初始 DOM計(jì)數(shù)，但是經(jīng)過(guò)幾次刷新后它會(huì)很快膨脹，因?yàn)樗羞@些新元素都位于底部。滾動(dòng)成為爬網(wǎng)，因?yàn)闈L動(dòng)全部與元素計(jì)數(shù)有關(guān)。沒(méi)有什么是無(wú)限的。

而collectionRepeat方法是僅使用視口中適合的盡可能多的元素，然后對(duì)其進(jìn)行回收。當(dāng)一個(gè)元素旋轉(zhuǎn)到視圖外時(shí)，它會(huì)與渲染樹(shù)分離，重新填充列表中新項(xiàng)目的數(shù)據(jù)，然后重新附加到列表另一端的渲染樹(shù)。這是人類已知的最快方法，它利用有限的現(xiàn)有元素集來(lái)獲取和接收DOM中的新信息，而不是傳統(tǒng)的創(chuàng)建/銷毀...創(chuàng)建/銷毀周期。使用這種方法，您可以真正實(shí)現(xiàn)無(wú)限滾動(dòng)。

請(qǐng)注意，您不必使用Ionic即可使用/ hack / adapt collectionRepeat或類似的任何其他工具。這就是為什么他們稱其為開(kāi)源。:-)（也就是說(shuō)，Ionic團(tuán)隊(duì)正在做一些非常巧妙的事情，值得您注意。）

至少有一個(gè)出色的示例，可以在React中完成非常類似的操作。您只是選擇不對(duì)樹(shù)中未顯示的任何內(nèi)容進(jìn)行渲染，而不是對(duì)具有更新內(nèi)容的元素進(jìn)行回收。盡管它們非常簡(jiǎn)單的POC實(shí)施允許一些閃爍，但它可以快速處理5000個(gè)項(xiàng)目。

另外... track by即使在數(shù)據(jù)集較小的情況下，使用它也會(huì)非常有用，以回應(yīng)其他一些帖子。認(rèn)為它是強(qiáng)制性的。

反對(duì) 回復(fù) 2019-10-14