Mam ogromny zbiór danych obejmujący kilka tysięcy wierszy z około 10 polami każdy, około 2 MB danych. Muszę to wyświetlić w przeglądarce. Najprostsze podejście (pobieranie danych, umieszczanie ich $scope, ng-repeat=""wykonywanie swojej pracy) działa dobrze, ale zawiesza przeglądarkę na około pół minuty, gdy zaczyna wstawiać węzły do ​​DOM. Jak mam podejść do tego problemu?

Jedną z opcji jest dodawanie wierszy $scopeprzyrostowo i czekanie na ngRepeatzakończenie wstawiania jednego fragmentu do DOM przed przejściem do następnego. Ale AFAIK ngRepeat nie zgłasza się po zakończeniu „powtarzania”, więc będzie brzydki.

Inną opcją jest podzielenie danych na serwerze na strony i pobranie ich w wielu żądaniach, ale to jeszcze brzydsze.

Przejrzałem dokumentację Angulara w poszukiwaniu czegoś podobnego ng-repeat="data in dataset" ng-repeat-steps="500", ale nic nie znalazłem. Jestem dość nowy w sposobach Angulara, więc możliwe, że całkowicie mija się z celem. Jakie są najlepsze praktyki w tym zakresie?

Zgadzam się z @ AndreM96, że najlepszym podejściem jest wyświetlanie tylko ograniczonej liczby wierszy, szybszego i lepszego UX, można to zrobić za pomocą paginacji lub nieskończonego przewijania.

Nieskończone przewijanie z Angular jest naprawdę proste dzięki filtrowi limitTo . Musisz tylko ustawić początkowy limit, a gdy użytkownik prosi o więcej danych (dla uproszczenia używam przycisku), zwiększasz limit.

<table>
    <tr ng-repeat="d in data | limitTo:totalDisplayed"><td>{{d}}</td></tr>
</table>
<button class="btn" ng-click="loadMore()">Load more</button>

//the controller
$scope.totalDisplayed = 20;

$scope.loadMore = function () {
  $scope.totalDisplayed += 20;  
};

$scope.data = data;

Oto plik JsBin .

Takie podejście może być problemem w przypadku telefonów, ponieważ zwykle opóźniają się one podczas przewijania dużej ilości danych, więc w tym przypadku myślę, że paginacja pasuje lepiej.

Aby to zrobić, będziesz potrzebować filtra limitTo, a także niestandardowego filtru, aby zdefiniować punkt początkowy wyświetlanych danych.

Oto JSBin z paginacją.

Najgorętsze - i prawdopodobnie najbardziej skalowalne - podejście do pokonywania tych wyzwań w przypadku dużych zbiorów danych jest zawarte w dyrektywie Ionic CollectionRepeat i innych podobnych implementacjach. Wymyślnym terminem na to jest `` eliminacja okluzji '' , ale można to podsumować następująco: nie ograniczaj liczby renderowanych elementów DOM do dowolnej (ale wciąż wysokiej) liczby z paginami, takiej jak 50, 100, 500 ... zamiast tego , ogranicz tylko do tylu elementów, ile użytkownik widzi .

Jeśli zrobisz coś podobnego do tego, co jest powszechnie znane jako „nieskończone przewijanie”, nieco zmniejszasz początkową liczbę DOM, ale po kilku odświeżeniach szybko się powiększa, ponieważ wszystkie te nowe elementy są po prostu przyczepione na dole. Przewijanie dochodzi do indeksowania, ponieważ przewijanie polega na liczbie elementów. Nie ma w tym nic nieskończonego.

Natomiast collectionRepeatpodejście polega na użyciu tylko tylu elementów, ile zmieści się w rzutni, a następnie ich przetworzeniu . Gdy jeden element obraca się poza widok, jest odłączany od drzewa renderowania, uzupełniany danymi dla nowego elementu na liście, a następnie ponownie dołączany do drzewa renderowania na drugim końcu listy. Jest to najszybszy znany człowiekowi sposób uzyskiwania nowych informacji do i z DOM, wykorzystujący ograniczony zestaw istniejących elementów, zamiast tradycyjnego cyklu tworzenia / niszczenia ... tworzenia / niszczenia. Korzystając z tego podejścia, możesz naprawdę zaimplementować nieskończone przewijanie.

Zwróć uwagę, że nie musisz używać Ionic, aby używać / hack / adapt collectionRepeat, ani żadnego innego podobnego narzędzia. Dlatego nazywają to open-source. :-) (To powiedziawszy, zespół Ionic robi całkiem genialne rzeczy, warte twojej uwagi.)

Jest przynajmniej jeden doskonały przykład robienia czegoś bardzo podobnego w Reakcie. Tylko zamiast przetwarzać elementy ze zaktualizowaną zawartością, po prostu decydujesz się nie renderować niczego w drzewie, czego nie ma w widoku. Błyskawicznie działa na 5000 pozycji, chociaż ich bardzo prosta implementacja POC pozwala na odrobinę migotania ...

Ponadto ... aby powtórzyć niektóre inne posty, użycie track byjest bardzo pomocne, nawet w przypadku mniejszych zbiorów danych. Uważaj to za obowiązkowe.

Polecam to zobaczyć:

• http://blog.scalyr.com/2013/10/angularjs-1200ms-to-35ms/

Optymalizacja AngularJS: 1200 ms do 35 ms

stworzyli nową dyrektywę, optymalizując powtarzanie ng w 4 częściach:

Optymalizacja nr 1: buforuj elementy DOM

Optymalizacja # 2: Agregacja obserwatorów

Optymalizacja # 3: Odłóż tworzenie elementów

Optymalizacja # 4: Pomiń obserwatorów w poszukiwaniu ukrytych elementów

projekt jest tutaj na github:

• https://github.com/scalyr/angular

Stosowanie:

1- Uwzględnij te pliki w swojej aplikacji jednostronicowej:

• core.js
• scalyr.js
• slyEvaluate.js
• slyRepeat.js

2- Dodaj zależność od modułu:

var app = angular.module("app", ['sly']);

3- wymień ng-powtórz

<tr sly-repeat="m in rows"> .....<tr>

Cieszyć się!

Oprócz wszystkich powyższych wskazówek, takich jak track by i mniejsze pętle, ta również bardzo mi pomogła

<span ng-bind="::stock.name"></span>

ten fragment kodu wypisze nazwę po załadowaniu i przestanie go oglądać. Podobnie, dla powtórzeń ng, można go użyć jako

<div ng-repeat="stock in ::ctrl.stocks">{{::stock.name}}</div>

jednak działa tylko z AngularJS w wersji 1.3 i nowszych. Z http://www.befundoo.com/blog/optimizing-ng-repeat-in-angularjs/

Aby zwiększyć wydajność, możesz użyć funkcji „śledź według”:

<div ng-repeat="a in arr track by a.trackingKey">

Szybszy niż:

<div ng-repeat="a in arr">

ref: https://www.airpair.com/angularjs/posts/angularjs-performance-large-applications

Jeśli wszystkie twoje wiersze mają równą wysokość, zdecydowanie powinieneś przyjrzeć się wirtualizacji ng-repeat: http://kamilkp.github.io/angular-vs-repeat/

To demo wygląda bardzo obiecująco (i obsługuje przewijanie inercyjne)

Zasada nr 1: Nigdy nie pozwól użytkownikowi czekać na nic.

Mając to na uwadze, strona rozwijająca się, która potrzebuje 10 sekund, pojawia się znacznie szybciej niż czekanie 3 sekundy na pusty ekran i otrzymanie wszystkiego naraz.

Zamiast więc przyspieszać stronę, po prostu pozwól, aby strona wyglądała na szybką, nawet jeśli wynik końcowy jest wolniejszy:

function applyItemlist(items){
    var item = items.shift();
    if(item){
        $timeout(function(){
            $scope.items.push(item);
            applyItemlist(items);
        }, 0); // <-- try a little gap of 10ms
    }
}

Powyższy kod sprawia, że ​​lista rośnie wiersz po wierszu i jest zawsze wolniejsza niż renderowanie wszystkich naraz. Ale dla użytkownika wydaje się to być szybsze.

Wirtualne przewijanie to kolejny sposób na poprawę wydajności przewijania w przypadku ogromnych list i dużych zbiorów danych.

Jednym ze sposobów realizacji tego jest użycie Angular Material, md-virtual-repeat jak pokazano w tym Demo z 50000 elementami

Zaczerpnięte prosto z dokumentacji wirtualnej powtórki:

Wirtualne powtórzenie jest ograniczonym substytutem ng-powtórzeń, które renderuje tylko wystarczającą liczbę węzłów dom, aby wypełnić kontener i ponownie je przetworzyć, gdy użytkownik przewija.

Inna wersja @Steffomio

Zamiast dodawać każdy element osobno, możemy dodawać elementy fragmentami.

// chunks function from here: 
// http://stackoverflow.com/questions/8495687/split-array-into-chunks#11764168
var chunks = chunk(folders, 100);

//immediate display of our first set of items
$scope.items = chunks[0];

var delay = 100;
angular.forEach(chunks, function(value, index) {
    delay += 100;

    // skip the first chuck
    if( index > 0 ) {
        $timeout(function() {
            Array.prototype.push.apply($scope.items,value);
        }, delay);
    }       
});

Czasami co się stało, otrzymujesz dane z serwera (lub zaplecza) w ciągu kilku ms (na przykład zakładam, że to 100 ms), ale wyświetlenie na naszej stronie zajmuje więcej czasu (powiedzmy, że trwa 900 aby pokaz).

Tak więc to, co się tutaj dzieje, to 800 ms. Wystarczy wyrenderować stronę internetową.

To, co zrobiłem w mojej aplikacji internetowej, to użycie paginacji (lub możesz użyć nieskończonego przewijania ) do wyświetlenia listy danych. Powiedzmy, że wyświetlam 50 danych na stronę.

Więc nie będę ładował wszystkich danych na raz, tylko 50 danych, które ładuję początkowo, co zajmuje tylko 50 ms (zakładam tutaj).

więc całkowity czas tutaj zmniejszył się z 900 ms do 150 ms, gdy użytkownik zażąda następnej strony, a następnie wyświetli następne 50 danych i tak dalej.

Mam nadzieję, że pomoże to poprawić wydajność. Wszystkiego najlepszego

Created a directive (ng-repeat with lazy loading) 

który ładuje dane, gdy osiągnie dół strony i usuwa połowę wcześniej załadowanych danych, a gdy ponownie osiąga górę div, zostaną załadowane poprzednie dane (w zależności od numeru strony) usuwając połowę bieżących danych Tak na DOM w danym momencie obecne są tylko ograniczone dane, co może prowadzić do lepszej wydajności zamiast renderowania całych danych pod obciążeniem.

KOD HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="ListController">
  <div class="row customScroll" id="customTable" datafilter pagenumber="pageNumber" data="rowData" searchdata="searchdata" itemsPerPage="{{itemsPerPage}}"  totaldata="totalData"   selectedrow="onRowSelected(row,row.index)"  style="height:300px;overflow-y: auto;padding-top: 5px">

    <!--<div class="col-md-12 col-xs-12 col-sm-12 assign-list" ng-repeat="row in CRGC.rowData track by $index | orderBy:sortField:sortReverse | filter:searchFish">-->
    <div class="col-md-12 col-xs-12 col-sm-12 pdl0 assign-list" style="padding:10px" ng-repeat="row in rowData" ng-hide="row[CRGC.columns[0].id]=='' && row[CRGC.columns[1].id]==''">
        <!--col1-->

        <div ng-click ="onRowSelected(row,row.index)"> <span>{{row["sno"]}}</span> <span>{{row["id"]}}</span> <span>{{row["name"]}}</span></div>
      <!--   <div class="border_opacity"></div> -->
    </div>

</div>

  </body>

</html>

Kątowy KOD:

var app = angular.module('plunker', []);
var x;
ListController.$inject = ['$scope', '$timeout', '$q', '$templateCache'];

function ListController($scope, $timeout, $q, $templateCache) {
  $scope.itemsPerPage = 40;
  $scope.lastPage = 0;
  $scope.maxPage = 100;
  $scope.data = [];
  $scope.pageNumber = 0;


  $scope.makeid = function() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for (var i = 0; i < 5; i++)
      text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
  }


  $scope.DataFormFunction = function() {
      var arrayObj = [];
      for (var i = 0; i < $scope.itemsPerPage*$scope.maxPage; i++) {
          arrayObj.push({
              sno: i + 1,
              id: Math.random() * 100,
              name: $scope.makeid()
          });
      }
      $scope.totalData = arrayObj;
      $scope.totalData = $scope.totalData.filter(function(a,i){ a.index = i; return true; })
      $scope.rowData = $scope.totalData.slice(0, $scope.itemsperpage);
    }
  $scope.DataFormFunction();

  $scope.onRowSelected = function(row,index){
    console.log(row,index);
  }

}

angular.module('plunker').controller('ListController', ListController).directive('datafilter', function($compile) {
  return {
    restrict: 'EAC',
    scope: {
      data: '=',
      totalData: '=totaldata',
      pageNumber: '=pagenumber',
      searchdata: '=',
      defaultinput: '=',
      selectedrow: '&',
      filterflag: '=',
      totalFilterData: '='
    },
    link: function(scope, elem, attr) {
      //scope.pageNumber = 0;
      var tempData = angular.copy(scope.totalData);
      scope.totalPageLength = Math.ceil(scope.totalData.length / +attr.itemsperpage);
      console.log(scope.totalData);
      scope.data = scope.totalData.slice(0, attr.itemsperpage);
      elem.on('scroll', function(event) {
        event.preventDefault();
      //  var scrollHeight = angular.element('#customTable').scrollTop();
      var scrollHeight = document.getElementById("customTable").scrollTop
        /*if(scope.filterflag && scope.pageNumber != 0){
        scope.data = scope.totalFilterData;
        scope.pageNumber = 0;
        angular.element('#customTable').scrollTop(0);
        }*/
        if (scrollHeight < 100) {
          if (!scope.filterflag) {
            scope.scrollUp();
          }
        }
        if (angular.element(this).scrollTop() + angular.element(this).innerHeight() >= angular.element(this)[0].scrollHeight) {
          console.log("scroll bottom reached");
          if (!scope.filterflag) {
            scope.scrollDown();
          }
        }
        scope.$apply(scope.data);

      });

      /*
       * Scroll down data append function
       */
      scope.scrollDown = function() {
          if (scope.defaultinput == undefined || scope.defaultinput == "") { //filter data append condition on scroll
            scope.totalDataCompare = scope.totalData;
          } else {
            scope.totalDataCompare = scope.totalFilterData;
          }
          scope.totalPageLength = Math.ceil(scope.totalDataCompare.length / +attr.itemsperpage);
          if (scope.pageNumber < scope.totalPageLength - 1) {
            scope.pageNumber++;
            scope.lastaddedData = scope.totalDataCompare.slice(scope.pageNumber * attr.itemsperpage, (+attr.itemsperpage) + (+scope.pageNumber * attr.itemsperpage));
            scope.data = scope.totalDataCompare.slice(scope.pageNumber * attr.itemsperpage - 0.5 * (+attr.itemsperpage), scope.pageNumber * attr.itemsperpage);
            scope.data = scope.data.concat(scope.lastaddedData);
            scope.$apply(scope.data);
            if (scope.pageNumber < scope.totalPageLength) {
              var divHeight = $('.assign-list').outerHeight();
              if (!scope.moveToPositionFlag) {
                angular.element('#customTable').scrollTop(divHeight * 0.5 * (+attr.itemsperpage));
              } else {
                scope.moveToPositionFlag = false;
              }
            }


          }
        }
        /*
         * Scroll up data append function
         */
      scope.scrollUp = function() {
          if (scope.defaultinput == undefined || scope.defaultinput == "") { //filter data append condition on scroll
            scope.totalDataCompare = scope.totalData;
          } else {
            scope.totalDataCompare = scope.totalFilterData;
          }
          scope.totalPageLength = Math.ceil(scope.totalDataCompare.length / +attr.itemsperpage);
          if (scope.pageNumber > 0) {
            this.positionData = scope.data[0];
            scope.data = scope.totalDataCompare.slice(scope.pageNumber * attr.itemsperpage - 0.5 * (+attr.itemsperpage), scope.pageNumber * attr.itemsperpage);
            var position = +attr.itemsperpage * scope.pageNumber - 1.5 * (+attr.itemsperpage);
            if (position < 0) {
              position = 0;
            }
            scope.TopAddData = scope.totalDataCompare.slice(position, (+attr.itemsperpage) + position);
            scope.pageNumber--;
            var divHeight = $('.assign-list').outerHeight();
            if (position != 0) {
              scope.data = scope.TopAddData.concat(scope.data);
              scope.$apply(scope.data);
              angular.element('#customTable').scrollTop(divHeight * 1 * (+attr.itemsperpage));
            } else {
              scope.data = scope.TopAddData;
              scope.$apply(scope.data);
              angular.element('#customTable').scrollTop(divHeight * 0.5 * (+attr.itemsperpage));
            }
          }
        }
    }
  };
});

Demo z dyrektywą

Another Solution: If you using UI-grid in the project then  same implementation is there in UI grid with infinite-scroll.

W zależności od wysokości podziału ładuje dane i po przewinięciu nowe dane zostaną dołączone, a poprzednie zostaną usunięte.

Kod HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" type="text/css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.6/ui-grid.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="ListController">
     <div class="input-group" style="margin-bottom: 15px">
      <div class="input-group-btn">
        <button class='btn btn-primary' ng-click="resetList()">RESET</button>
      </div>
      <input class="form-control" ng-model="search" ng-change="abc()">
    </div>

    <div data-ui-grid="gridOptions" class="grid" ui-grid-selection  data-ui-grid-infinite-scroll style="height :400px"></div>

    <button ng-click="getProductList()">Submit</button>
  </body>

</html>

Kod kątowy:

var app = angular.module('plunker', ['ui.grid', 'ui.grid.infiniteScroll', 'ui.grid.selection']);
var x;
angular.module('plunker').controller('ListController', ListController);
ListController.$inject = ['$scope', '$timeout', '$q', '$templateCache'];

function ListController($scope, $timeout, $q, $templateCache) {
    $scope.itemsPerPage = 200;
    $scope.lastPage = 0;
    $scope.maxPage = 5;
    $scope.data = [];

    var request = {
        "startAt": "1",
        "noOfRecords": $scope.itemsPerPage
    };
    $templateCache.put('ui-grid/selectionRowHeaderButtons',
        "<div class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-row-selected': row.isSelected}\" ><input style=\"margin: 0; vertical-align: middle\" type=\"checkbox\" ng-model=\"row.isSelected\" ng-click=\"row.isSelected=!row.isSelected;selectButtonClick(row, $event)\">&nbsp;</div>"
    );


    $templateCache.put('ui-grid/selectionSelectAllButtons',
        "<div class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-all-selected': grid.selection.selectAll}\" ng-if=\"grid.options.enableSelectAll\"><input style=\"margin: 0; vertical-align: middle\" type=\"checkbox\" ng-model=\"grid.selection.selectAll\" ng-click=\"grid.selection.selectAll=!grid.selection.selectAll;headerButtonClick($event)\"></div>"
    );

    $scope.gridOptions = {
        infiniteScrollDown: true,
        enableSorting: false,
        enableRowSelection: true,
        enableSelectAll: true,
        //enableFullRowSelection: true,
        columnDefs: [{
            field: 'sno',
            name: 'sno'
        }, {
            field: 'id',
            name: 'ID'
        }, {
            field: 'name',
            name: 'My Name'
        }],
        data: 'data',
        onRegisterApi: function(gridApi) {
            gridApi.infiniteScroll.on.needLoadMoreData($scope, $scope.loadMoreData);
            $scope.gridApi = gridApi;
        }
    };
    $scope.gridOptions.multiSelect = true;
    $scope.makeid = function() {
        var text = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        for (var i = 0; i < 5; i++)
            text += possible.charAt(Math.floor(Math.random() * possible.length));

        return text;
    }
    $scope.abc = function() {
        var a = $scope.search;
        x = $scope.searchData;
        $scope.data = x.filter(function(arr, y) {
            return arr.name.indexOf(a) > -1
        })
        console.log($scope.data);
        if ($scope.gridApi.grid.selection.selectAll)
            $timeout(function() {
                $scope.gridApi.selection.selectAllRows();
            }, 100);
    }


    $scope.loadMoreData = function() {
        var promise = $q.defer();
        if ($scope.lastPage < $scope.maxPage) {
            $timeout(function() {
                var arrayObj = [];
                for (var i = 0; i < $scope.itemsPerPage; i++) {
                    arrayObj.push({
                        sno: i + 1,
                        id: Math.random() * 100,
                        name: $scope.makeid()
                    });
                }

                if (!$scope.search) {
                    $scope.lastPage++;
                    $scope.data = $scope.data.concat(arrayObj);
                    $scope.gridApi.infiniteScroll.dataLoaded();
                    console.log($scope.data);
                    $scope.searchData = $scope.data;
                    // $scope.data = $scope.searchData;
                    promise.resolve();
                    if ($scope.gridApi.grid.selection.selectAll)
                        $timeout(function() {
                            $scope.gridApi.selection.selectAllRows();
                        }, 100);
                }


            }, Math.random() * 1000);
        } else {
            $scope.gridApi.infiniteScroll.dataLoaded();
            promise.resolve();
        }
        return promise.promise;
    };

    $scope.loadMoreData();

    $scope.getProductList = function() {

        if ($scope.gridApi.selection.getSelectedRows().length > 0) {
            $scope.gridOptions.data = $scope.resultSimulatedData;
            $scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows(); //<--Property undefined error here
            console.log($scope.mySelectedRows);
            //alert('Selected Row: ' + $scope.mySelectedRows[0].id + ', ' + $scope.mySelectedRows[0].name + '.');
        } else {
            alert('Select a row first');
        }
    }
    $scope.getSelectedRows = function() {
        $scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows();
    }
    $scope.headerButtonClick = function() {

        $scope.selectAll = $scope.grid.selection.selectAll;

    }
}

Demo z siatką UI z nieskończonym przewijaniem Demo

w przypadku dużego zestawu danych i listy rozwijanej wielu wartości lepiej jest użyć ng-optionszamiast ng-repeat.

ng-repeatjest powolny, ponieważ zapętla wszystkie nadchodzące wartości, ale ng-optionspo prostu wyświetla się w opcji wyboru.

ng-options='state.StateCode as state.StateName for state in States'>

znacznie szybciej niż

<option ng-repeat="state in States" value="{{state.StateCode}}">
    {{state.StateName }}
</option>