Strategies for Improving ngRepeat Performance with Large Datasets in Angular.js

Problem Background and Challenges

In Angular.js applications, displaying large datasets with thousands of rows (e.g., around 2MB in size, with 10 fields per row) using the ng-repeat directive can cause browser freezes for about 30 seconds. This occurs because ng-repeat inserts all data into the DOM at once, leading to rendering bottlenecks. While incremental data appending or server-side pagination can mitigate this, these methods are often inelegant or inefficient.

Core Solution: Limiting Displayed Data

The best practice is to display only the data currently visible to the user, rather than rendering the entire dataset at once. This can be achieved through pagination or infinite scrolling, significantly enhancing user experience and performance. Angular.js's built-in limitTo filter provides straightforward support for this.

Implementing Infinite Scrolling with the limitTo Filter

Below is an example of infinite scrolling using the limitTo filter. Initially, only 20 rows are displayed, and the number increases incrementally when the user clicks a "Load more" button.

<table>
    <tr ng-repeat="d in data | limitTo:totalDisplayed"><td>{{d}}</td></tr>
</table>
<button class="btn" ng-click="loadMore()">Load more</button>

// Controller code
$scope.totalDisplayed = 20;

$scope.loadMore = function () {
  $scope.totalDisplayed += 20;  
};

$scope.data = data;

This approach is simple and effective, but note that on mobile devices, scrolling through large amounts of data may still cause performance issues, making pagination a more suitable option in such cases.

Pagination Implementation

Pagination requires combining the limitTo filter with a custom filter to define the starting point of the data. This allows users to browse data page by page, avoiding excessive loading at once. For example, you can set 50 rows per page and use navigation controls to switch between pages.

Advanced Optimization Strategies

Beyond basic pagination and infinite scrolling, more advanced optimization methods include element recycling techniques, such as the collectionRepeat directive in the Ionic framework. This method renders only elements within the viewport and recycles and reuses DOM elements during scrolling, rather than continuously creating and destroying them. This drastically reduces DOM operations, enabling true infinite scrolling performance.

Additionally, third-party optimization libraries like Scalyr's sly-repeat offer further performance improvements through tricks such as caching DOM elements, aggregating watchers, and deferring element creation, reducing rendering time from 1200ms to 35ms. Using these libraries typically involves replacing ng-repeat with sly-repeat and adding the corresponding module dependencies.

Practical Recommendations and Summary

When handling large datasets, start by implementing pagination or infinite scrolling using the limitTo filter, as this is the simplest and most effective solution. For higher performance needs, explore element recycling techniques or third-party optimization libraries. Always use track by to optimize data binding, even in smaller datasets, to improve efficiency. By applying these strategies, you can significantly enhance the responsiveness and user experience of Angular.js applications when dealing with large data volumes.