第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

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

3 回答

?
偶然的你

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

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


如果執(zhí)行類似“無限滾動”的操作,則可以減少初始 DOM計數(shù),但是經(jīng)過幾次刷新后它會很快膨脹,因為所有這些新元素都位于底部。滾動成為爬網(wǎng),因為滾動全部與元素計數(shù)有關(guān)。沒有什么是無限的。


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


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


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


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


查看完整回答
反對 回復(fù) 2019-10-14
  • 3 回答
  • 0 關(guān)注
  • 598 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號