亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

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

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

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

3 回答

?
偶然的你

TA貢獻1841條經驗 獲得超3個贊

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


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


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


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


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


另外... track by即使在數據集較小的情況下,使用它也會非常有用,以回應其他一些帖子。認為它是強制性的。


查看完整回答
反對 回復 2019-10-14
  • 3 回答
  • 0 關注
  • 600 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號