長數組列表渲染使Angular.js中的頁面滾動速度變慢

Question

當嘗試從一個數組（帶圖像）渲染超過120個項目時，列表的滾動變慢。 基本上，當我在無限滾動中加載新數據時，我將舊數組數據與新數組數據連接起來。

另一方面，像dribbble，behance這樣的熱門網站似乎沒有這個問題。 也許這個問題特定於Angular.js？ 有人在他們的項目中遇到過這個問題嗎？

Answer 1

ANGULARJS中的無限滾動

不需要任何額外的插件。

 app = angular.module("demo", []); app.controller("MainController", function($scope, $http){ // the array which represents the list $scope.items = ["1. Scroll the list to load more"]; $scope.loading = true; // this function fetches a random text and adds it to array $scope.more = function(){ $http({ method: "GET", url: "https://baconipsum.com/api/?type=all-meat&paras=2&start-with-lorem=1" }).success(function(data, status, header, config){ // returned data contains an array of 2 sentences for(line in data){ newItem = ($scope.items.length+1)+". "+data[line]; $scope.items.push(newItem); } $scope.loading = false; }); }; // we call the function twice to populate the list $scope.more(); }); // we create a simple directive to modify behavior of <ul> app.directive("whenScrolled", function(){ return{ restrict: 'A', link: function(scope, elem, attrs){ // we get a list of elements of size 1 and need the first element raw = elem[0]; // we load more elements when scrolled past a limit elem.bind("scroll", function(){ if(raw.scrollTop+raw.offsetHeight+5 >= raw.scrollHeight){ scope.loading = true; // we can give any function which loads more elements into the list scope.$apply(attrs.whenScrolled); } }); } } }); 

 li{ display:block; list-style-type:none; margin-bottom: 1em; } ul{ height:250px; background: #44E394; color: #fff; overflow:auto; width:550px; border-radius: 5px; margin:0 auto; padding: 0.5em; border: 1px dashed #11BD6D; &::-webkit-scrollbar{ width:8px; background-color:transparent; }; &::-webkit-scrollbar-thumb{ background-color:#b0fccd; border-radius:10px; } &::-moz-scrollbar{ width:8px; background-color:transparent; }; &::-moz-scrollbar-thumb{ background-color:#b0fccd; border-radius:10px; } &::-ms-scrollbar{ width:8px; background-color:transparent; }; &::-ms-scrollbar-thumb{ background-color:#b0fccd; border-radius:10px; } } body{ text-align:center; font-size:1.2em; font-family: "Helvetica"; color: #44E394; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAG0lEQVQIW2P88OHDfwY0wAgSFBAQYEQWp1AQAKUbE9XRpv7GAAAAAElFTkSuQmCC) repeat; padding: 2em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div data-ng-app='demo'> <div data-ng-controller='MainController'> <ul class='hello' when-scrolled='more()'> <li data-ng-repeat='item in items'> {{item}} </li> </ul> <div data-ng-show='loading'>Loading</div> </div> </div> <h1>INFINITE SCROLLING IN ANGULARJS</h1> 

Answer 2

ngInfiniteScroll只是一個可用於實現無限滾動的指令，它不會影響此問題。

這里有一些加快應用程序的提示

• 盡可能避免在重復部分使用觀察者

  • 使用一次性綁定： {{::model}}
  • 減少使用ng-* ：所有這些都增加了$ watch。
  • 減少使用$watchCollection或$watch
  • 使用ng-if代替ng-show ：它會刪除dom並銷毀觀察者。
  • 使用track by ：對於大型集合，這可以顯着提高渲染性能。

• 在連接中：

  你可以在plunker和next命令中看到你的問題

    [].push.apply($scope.list,getNewList()); 

  比...更好

    $scope.list=$scope.list.concat(getNewList()); 

---

但是以上所有提示都允許用戶在列表中有更多項目，但是當列表中的項目數量超過（比方說1000）時，滾動會再次變慢

對於這個問題，我們可以使用Angular Material md-virtual-repeat ，它只是按需加載可見項，就像我在虛擬重復中使用的那樣 。

Answer 3

我認為您應該考慮優化您的應用程序，而不僅僅是選擇更好的指令或插件，太多的范圍也會降低應用程序的速度。