performance issue with angularjs table

Question

I'm using angularjs with signalr. I have a table which all rows are created on the server side. I have checked all the performance on the serverside and it is OK. When calling my client side method to insert about 5000 rows it takes a few second before they show up in the GUI. I have tried adding track by $index and track by row.rowId but it's still slow.

When making a CPU profile and checking the chart in chrome dev tools I can't really find anything that should take that long time..So I'm kind a lost here.

Server side method takes (should be the issue here):

00:00:00.0024354

Client side method (insertSubRows):

191.9400000000005 (MilliSeconds)

Why does it takes so long for the rows to appear in the GUI?

js functions:

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);
}

My table:

<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>

Answer 1

5000行会影响性能，您需要通过在服务器端分页数据或推出自己的虚拟化解决方案（即无限滚动）来设计替代解决方案，请查看http://ui-grid.info / docs /＃/ tutorial / 404_large_data_sets_and_performance例如虚拟化