AngularJS ng-repeat is slow

Question

It is not like it is slow on rendering many entries. The problem is that whenever the $scope.data got updated, it adds the new item first at the end of the element, then reduce it as it match the new $scope.data.

For example:


    {{entry.title}}

This script is updating the $scope.data:

$scope.load = function() {
    $scope.data = getDataFromDB();
}

Lets say I have 5 entries inside $scope.data. The entries are:

[
    {
        id: 1,
        title: 1
    },
    {
        id: 2,
        title: 2
    },
    ......
]

When the $scope.data already has those entries then got reloaded ($scope.data = getDataFromDB(); being called), the DOM element for about 0.1s - 0.2s has 10 elements (duplicate elements), then after 0.1s - 0.2s it is reduced to 5.

So the problem is that there is delay about 0.1s - 0.2s when updating the ng-repeat DOM. This looks really bad when I implement live search. Whenever it updates from the database, the ng-repeat DOM element got added up every time for a brief millisecond.

How can I make the rendering instant?

EDITED

I will paste all my code here:

The controller:

$scope.search = function (table) {
    $scope.currentPage = 1;
    $scope.endOfPage = false;
    $scope.viewModels = [];
    $scope.loadViewModels($scope.orderBy, table);
}

$scope.loadViewModels = function (orderBy, table, cb) {
    if (!$scope.endOfPage) {
        let searchKey = $scope.page.searchString;
        let skip = ($scope.currentPage - 1) * $scope.itemsPerPage;
        let searchClause = '';

        if (searchKey && searchKey.length > 0) {
            let searchArr = [];
            $($scope.vmKeys).each((i, key) => {
                searchArr.push(key + ` LIKE '%` + searchKey + `%'`);
            });
            searchClause = `WHERE ` + searchArr.join(' OR ');
        }

        let sc = `SELECT * FROM ` + table + ` ` + searchClause + ` ` + orderBy +
            ` LIMIT ` + skip + `, ` + $scope.itemsPerPage;
        sqlite.query(sc, rows => {
            $scope.$apply(function () {
                var data = [];
                let loadedCount = 0;
                if (rows != null) {
                    $scope.currentPage += 1;
                    loadedCount = rows.length;
                    if (rows.length < $scope.itemsPerPage)
                        $scope.endOfPage = true

                    for (var i = 0; i < rows.length; i++) {
                        let item = rows.item(i);
                        let returnObject = {};
                        $($scope.vmKeys).each((i, key) => {
                            returnObject[key] = item[key];
                        });
                        data.push(returnObject);
                    }
                    $scope.viewModels = $scope.viewModels.concat(data);
                } 
                else
                    $scope.endOfPage = true;

                if (cb)
                    cb(loadedCount);
            })
        });
    }
}

The view:


    
        Notes
        
        
            
            {{data.dateCreated | displayDate}}

Calling it from:

$scope.loadViewModels($scope.orderBy, 'notes');

The sqlite query:

query: function (query, cb) {
    db.transaction(function (tx) {
        tx.executeSql(query, [], function (tx, res) {
            return cb(res.rows, null);
        });
    }, function (error) {
        return cb(null, error.message);
    }, function () {
        //console.log('query ok');
    });
},

It is apache cordova framework, so it uses webview in Android emulator.

My Code Structure


    ....
    
        ....
        
            ....

So there is controller inside controller. The parent is pageController and the child is noteController. Is a structure like this slowing the ng-repeat directives?

Btw using track by is not helping. There is still delay when rendering it. Also I can modify the entries as well, so when an entry was updated, it should be updated in the list as well.

NOTE

After thorough investigation there is something weird. Usually ng-repeat item has hash key in it. In my case ng-repeat items do not have it. Is it the cause of the problem?

user_5535245 · Answer

One approach to improve performance is to use the track by clause in the ng-repeat expression:


    {{entry.title}}

From the Docs:

Best Practice: If you are working with objects that have a unique identifier property, you should track by this identifier instead of the object instance, e.g. item in items track by item.id. Should you reload your data later, ngRepeat will not have to rebuild the DOM elements for items it has already rendered, even if the JavaScript objects in the collection have been substituted for new ones. For large collections, this significantly improves rendering performance.

For more information, see

AngularJS ngRepeat API Reference -- Tracking and Duplicates

user_8385208 · Answer

In your html, try this:

user_5022605 · Answer

After thorough research, I found my problem. Every time I reset / reload my $scope.viewModels I always assign it to null / empty array first. This what causes the render delay.

Example:

$scope.search = function (table) {
    $scope.currentPage = 1;
    $scope.endOfPage = false;
    $scope.viewModels = []; <------ THIS
    $scope.loadViewModels($scope.orderBy, table);
}

So instead of assigning it to null / empty array, I just replace it with the new loaded data, and the flickering is gone.

AngularJS ng-repeat is slow

EDITED

My Code Structure

NOTE

3 Answers