CODEWITHSUNDEEP
javascriptangularjsperformance
MrProgram
MrProgram

Reputation: 5242

performance issue with angularjs table

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>

Upvotes: 0

Views: 94

Answers (1)

pateketu
pateketu

Reputation: 451

5000 rows are lot and will have an performance hit, you would need to design an alternate solution either by Pagination of data on server side or rolling out your own virtualization solution (i.e. infinite scrolling), checkout http://ui-grid.info/docs/#/tutorial/404_large_data_sets_and_performance for example of virtualization

Upvotes: 1

Related Questions