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>

You can't expect adding 5000 rows (meaning A LOT of DOM) to be fast. Fortunately you are not the first to encounter this problem. The solution is to use a virtual list. This one is good: github.com/2fdevs/angular-virtual-list — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Feb 23, 2016 at 9:20
Well, I'm not exptecting it to be fast, just faster as fast as it can :) thank you, will check it out — MrProgram
– MrProgram, Commented Feb 23, 2016 at 9:22
You are basically limited by how fast DOM can be built and rendered by the browser. — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Feb 23, 2016 at 9:23
@dandavis I'm using dir-paginate github.com/michaelbromley/angularUtils/tree/master/src/… — MrProgram
– MrProgram, Commented Feb 23, 2016 at 9:26

pateketu · Accepted Answer · 2016-02-23 09:28:06Z

1

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

answered Feb 23, 2016 at 9:28

pateketu

4512 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

performance issue with angularjs table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related