Более 100 столбцов с рендерингом 10 строк очень худшие в ui-сетке

Question

Если у меня 1000 строк с 10-30 столбцами, это прекрасно работает, , но если у меня есть 10 строк с 200 + столбцами, рендеринг занимает от 2 до 3 минут.

Через некоторое время данные не видны при горизонтальной прокрутке. В конце концов, страница перестает отвечать на запросы.

Код здесь:

$http.post($scope.url + "/getPagingRecordImportedTable", { 
    dbname : $stateParams.dbname, 
    tableName : tablename, 
    pageNumber : 1 
}).success(function(response) { 
    $scope.names = response.records; 
    $scope.mdata = response.metadata; 
    $scope.gridOptions.data = response.records; 
    var columnsize = 0; 
    for (var obj in $scope.mdata) { 
     if ($scope.mdata[obj]['columnsize'] > 20) { 
      columnsize = 20; 
     } else { 
      columnsize = $scope.mdata[obj]['columnsize']; 
     } 
     $scope.columns.push({ 
      field : $scope.mdata[obj]['columnname'], 
      width : columnsize 
     }); 
    } 
    console.log("-----------Data received"); 
}) 

После обжига запроса HTTP журнал -------------Data received немедленно печатаются, но рендеринг данных занимает слишком много времени.

Как улучшить производительность? Или есть ли какой-либо другой API для огромных строк и 200 + столбцов ?!

Answer 1

В прошлом году мне пришлось иметь дело с подобной вещью и обобщил мои мысли в статье Rendering large data with AngularJS 1.4 (ft. Polymer 0.5).

В основном, I recommend с использованием <iron-list> из полимерных компонентов, хотя для этого требуется некоторое рефакторинг (в зависимости от вашего варианта использования).

Если вы не можете или не хотите использовать <iron-list>, попробуйте как можно больше использовать one-time bindings.