Czy istnieje sposób, aby przyspieszyć sposób, w jaki moja siatka reaguje, gdy mam wiele wierszy?

Question

Mam kod, który tworzy siatkę tak:

<div ng-repeat="row in home.grid.data track by row.examId"> 
    <div>{{ row.examId }}</div> 
    <div>xxxx</div> 
</div> 

mam więcej po tych kolumn.

Czy mogę przyspieszyć sposób, w jaki reaguje moja strona? Wydaje się, że gdy mam dużą ilość danych w siatce, strony reagują powoli. Czy to byłoby zrobić różnicę, jeśli użyłem ng-model w polu typu wejściowego dla row.examId. Zauważ, że niektóre z poniższych pól można edytować, ale większość jest tylko wyświetlana.

Answer 1

Wierzę, że bindonce robi dokładnie to, czego potrzebujesz.

Dzięki zmniejszeniu liczby obserwatorów pozwala stronie lepiej reagować. Sprawdź ich demos.

Answer 2

Największą rzeczą, jaką udało mi się uzyskać przy dużych stołach, jest ograniczenie powiązania zdarzeń z obiektem nadrzędnym i wykorzystanie efektu bulgotania w celu uchwycenia zdarzeń dzieci.

W przypadku rodzica można uzyskać cel, który został trafiony. Używam następującego kodu.

obj.onclick = function (e) { 
    e = window.event || e; 
    var t = e.target || e.srcElement; 
} 

w tym przypadku e jest twoim zwykłym obiektem zdarzenia, t jest obiektem, który był początkowym celem przed bąblowaniem zdarzenia. Musisz użyć t, ponieważ "to" odnosi się do obiektu, do którego zdarzenie jest powiązane, a nie do obiektu, który wywołał zdarzenie.

Gdzie użyłem kodu, który był naprawdę dużą tabelą, zredukował czas renderowania tabeli o prawie 80%, przenosząc zdarzenia do węzła nadrzędnego, który był statyczny. Pomaga to również w przypadku konieczności aktualizacji zawartości, ponieważ nie trzeba ponownie wiązać żadnych zdarzeń.

Mam nadzieję, że to pomoże.

Answer 3

Oto, co zrobiłem. Istnieją dwa sposoby. Niezależnie od obu rozwiązań, użyj bindOnce. Sprawdzaj liczbę obserwatorów na stronie. Spójrz na koniec tego rozwiązania - jak śledzić obserwatorów na stronie.

I dodaje się roztwór 3 i ten pracuje niesamowite, do układania jest trochę trudne

Roztwór 1:

Za pomocą sterowania z stronicowanie wiążą raz.

Rozwiązanie 2 To właśnie zadziałało dla mnie i jest bardzo eleganckie. Powtarzasz z bindonce, a następnie zaimplementujesz nieskończone przewijanie. Śledziłem this blog post i działa jak urok. Pomysł polega na ograniczeniu liczby wierszy i zmianie limitu podczas przewijania.

ng-repeat="item in items | orderBy:prop | filter:query | limitTo:limit" 

Zasadniczo Twój html wyglądałby tak. Zmodyfikowałem kod OP, aby użyć bindonce.

<div id="estates-listing" extend-height> 
    <div class="content" infinite-scroll="addMoreItems()" infinite-scroll-distance="2"> 
    <div class="content-wrapper"> 
     <div class="house" bindonce="estate" ng-animate="'animate'" ng-class="{inactive: (selectedEstate != null || selectedEstate != undefined) && estate.id!=selectedEstate.id , active:(selectedEstate != null || selectedEstate != undefined) && estate.id==selectedEstate.id}" ng-repeat="estate in estates | orderBy: orderProp : orderReverse | limitTo: config.itemsDisplayedInList track by estate.id" ng-mouseover="highlightMarker(estate)" ng-mouseleave="leaveMarker(estate)" ng-click="showDetailview(estate.id)" > 
     <div id="l-el{{estate.id}}"> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Oto nieskończona dyrektywa przewijania z postu. Dodaj to do swojej aplikacji, nie używaj standardowego nieskończonego przewijania za pomocą instalacji altanowej.

app.directive('infiniteScroll', [ 
    '$rootScope', '$window', '$timeout', function($rootScope, $window, $timeout) { 
    return { 
     link: function(scope, elem, attrs) { 
     var checkWhenEnabled, handler, scrollDistance, scrollEnabled; 
     $window = angular.element($window); 
     elem.css('overflow-y', 'scroll'); 
     elem.css('overflow-x', 'hidden'); 
     elem.css('height', 'inherit'); 
     scrollDistance = 0; 
     if (attrs.infiniteScrollDistance != null) { 
      scope.$watch(attrs.infiniteScrollDistance, function(value) { 
      return scrollDistance = parseInt(value, 10); 
      }); 
     } 
     scrollEnabled = true; 
     checkWhenEnabled = false; 
     if (attrs.infiniteScrollDisabled != null) { 
      scope.$watch(attrs.infiniteScrollDisabled, function(value) { 
      scrollEnabled = !value; 
      if (scrollEnabled && checkWhenEnabled) { 
       checkWhenEnabled = false; 
       return handler(); 
      } 
      }); 
     } 
     $rootScope.$on('refreshStart', function(event, parameters){ 
      elem.animate({ scrollTop: "0" }); 
     }); 
     handler = function() { 
      var container, elementBottom, remaining, shouldScroll, containerBottom; 
      container = $(elem.children()[0]); 
      elementBottom = elem.offset().top + elem.height(); 
      containerBottom = container.offset().top + container.height(); 
      remaining = containerBottom - elementBottom ; 
      shouldScroll = remaining <= elem.height() * scrollDistance; 
      if (shouldScroll && scrollEnabled) { 
      if ($rootScope.$$phase) { 
       return scope.$eval(attrs.infiniteScroll); 
      } else { 
       return scope.$apply(attrs.infiniteScroll); 
      } 
      } else if (shouldScroll) { 
      return checkWhenEnabled = true; 
      } 
     }; 
     elem.on('scroll', handler); 
     scope.$on('$destroy', function() { 
      return $window.off('scroll', handler); 
     }); 
     return $timeout((function() { 
      if (attrs.infiniteScrollImmediateCheck) { 
      if (scope.$eval(attrs.infiniteScrollImmediateCheck)) { 
       return handler(); 
      } 
      } else { 
      return handler(); 
      } 
     }), 0); 
     } 
    }; 
    } 
]); 

Rozwiązanie 3: Bądź śmiały i używać UI-Grid, UI Siatka jest nowa ng-grid. Nie jest gotowa do produkcji, ale gramy w produkcji na stole, gdzie mamy ponad 1000 rekordów - z pudełka jest niesamowita. Samouczki są obszerne, ale niewiele wspierają SO. Ma wbudowaną wirtualizację, a ponieważ jest rozszerzeniem ng-grid, ma dużą kompatybilność wsteczną. Oto przykład z 10,000 rows

Liczba obserwatorów na stronie: tutaj jest funkcja śledzenia liczby obserwatorów na stronie. Reguła kciuka nigdy nie przekraczać 2500 obserwatorów, ale ograniczyć się do < 1000.

$scope.TotalWatchers = function() { 
       var root = $(document.getElementsByTagName('body')); 
       var watchers = 0; 

       var f = function (element) { 
        if (element.data().hasOwnProperty('$scope')) { 
         watchers += (element.data().$scope.$$watchers || []).length; 
        } 

        angular.forEach(element.children(), function (childElement) { 
         f(angular.element(childElement)); 
        }); 
       }; 

       f(root); 

       return watchers; 
      };