проблема с производительностью с угловым столом

Я использую angularjs с signalr. У меня есть таблица, в которой все строки создаются на стороне сервера. Я проверил всю производительность на сервере, и все в порядке. При вызове метода моей клиентской стороны для вставки около 5000 строк требуется несколько секунд, прежде чем они появятся в графическом интерфейсе. Я попытался добавить track by $index и track by row.rowId, но он все еще медленный.проблема с производительностью с угловым столом

При создании профиля процессора и проверке диаграммы в инструментах chrome dev я не могу найти ничего, что должно занять это долгое время. Так что я добрый, потерянный здесь.

метод на стороне сервера принимает (должен быть вопрос здесь):

00: 00: 00,0024354

стороне клиента метод (insertSubRows):

191.9400000000005 (миллисекунды)

Почему это требуется? так долго, чтобы строки отображались в графическом интерфейсе?

JS функции:

myHub.client.insertSubRows = function (rowId, rows) { 
    var t0 = performance.now(); 
    $scope.totalRows = $scope.totalRows + rows.length; 
    for (var i = 0; i < $scope.rows.length; i++) { 
     if ($scope.rows[i].rowId === rowId) { 
      for (var j = 1; j <= rows.length; j++) { 
       $scope.rows.splice(i + j, 0, rows[j - 1]); 
      } 
      break; 
     } 
    } 
    $scope.$apply(); 
    var t1 = performance.now(); 
    console.log('insertSubRows ' + (t1 - t0)); 
} 

$scope.renderCellValue = function(row, column) { 
    var getter = $parse(column.Value); 
    return getter(row); 
}

Мой стол:

<table class="table table-striped table-hover table-responsive table-bordered testclass" id="posTable"> 
      <thead style="font-weight: bold;"> 
      <tr> 
       <th ng-repeat="column in columns" 
        ng-if="column.Checked" 
        ng-class="{'text-right' : column.TextRight }"> 
        <a href="#" ng-click="sortColumn(column.SortType)" ng-if="column.SortType !== null"> 
         {{column.Header}} 
         <span ng-if="sortType == column.SortType && sortReverse" class="caret"></span> 
         <span ng-if="sortType == column.SortType && !sortReverse" class="sort"></span> 
        </a> 
        <div ng-if="column.SortType === null">{{column.Header}}</div> 
       </th> 
      </tr> 
      </thead> 
      <tbody> 
      current-page="pagination.current"--> 
      <tr dir-paginate="row in rows 
        | itemsPerPage: pageSize 
        | filter:searchText 
        | filter:row.IsVisible 
        | orderBy:sortType:sortReverse" 
       data-ng-click="toggleNode(row)" 
       data-ng-show="row.IsVisible" 
       data-flash="row.IsVisible"> 
       <td ng-repeat="column in columns" 
        ng-if="column.Checked"> 
        {{renderCellValue(row, column)}} 
       </td> 

      </tr> 
      </tbody> 
     </table>

источник

2016-02-23 MrProgram

Вы не можете ожидать добавления 5000 строк (что означает A LO T DOM), чтобы быть быстрым. К счастью, вы не первый, кто столкнулся с этой проблемой. Решение состоит в использовании виртуального списка. Это хорошо: https://github.com/2fdevs/angular-virtual-list –

Ну, я не исключаю, чтобы это было быстро, только быстрее, как только можно :) спасибо, проверим это – MrProgram

Вы в основном ограничены тем, как быстро DOM может быть создан и отображен браузером. –

5000 строк много и будет иметь удар по производительности, вам необходимо разработать альтернативное решение либо путем PAGINATION данных на сервере (например, бесконечная прокрутка), проверка http://ui-grid.info/docs/#/tutorial/404_large_data_sets_and_performance, например, виртуализации

источник

2016-02-23 09:28:06 pateketu

проблема с производительностью с угловым столом

ответ

Смежные вопросы