Performance issues with AngularJS filters

Filters in AngularJS help format and transform data in views dynamically. However, they can cause performance issues when applied inefficiently, especially in large applications. Filters execute every time AngularJS runs its digest cycle, leading to unnecessary computations and UI slowdowns.

1. Why Do AngularJS Filters Cause Performance Issues?

Re-evaluation on Every Digest Cycle
Filters are re-applied every time AngularJS detects a change, even if the data hasn’t changed.

Expensive Operations in ng-repeat
Filters inside ng-repeat can lead to slow rendering when dealing with large lists.

Complex Filters in Views
Placing heavy logic in filters increases CPU usage, slowing down the application.

Memory Overhead
Filters create new objects or arrays instead of modifying the existing ones, consuming more memory.

2. Common Performance Issues and Fixes

Issue 1: Using Filters Directly in `ng-repeat` (Performance Bottleneck)

<li ng-repeat="item in items | filter:searchQuery">
  {{ item.name }}
</li>

Problem: The filter runs on every digest cycle, even if items haven’t changed.

Solution: Use a filtered list in the controller instead.

$scope.filteredItems = $filter('filter')($scope.items, $scope.searchQuery);

<li ng-repeat="item in filteredItems">
  {{ item.name }}
</li>

Result: The filter runs only when needed, improving performance.

Issue 2: Sorting Large Lists with `orderBy`

<li ng-repeat="item in items | orderBy:'name'">
  {{ item.name }}
</li>

Problem: The list is sorted on every digest cycle, slowing performance.

Solution: Sort the list once in the controller.

$scope.sortedItems = $filter('orderBy')($scope.items, 'name');

<li ng-repeat="item in sortedItems">
  {{ item.name }}
</li>

Result: Sorting occurs only when data changes, not on every cycle.

Issue 3: Using Filters with Two-Way Data Binding

<input type="text" ng-model="searchQuery">
<ul>
  <li ng-repeat="item in items | filter:searchQuery">
    {{ item.name }}
  </li>
</ul>

Problem: The filter re-runs on every keystroke, affecting responsiveness.

Solution: Use debounce to delay execution.

$scope.$watch('searchQuery', function(newValue) {
  if (newValue) {
    $timeout(function() {
      $scope.filteredItems = $filter('filter')($scope.items, newValue);
    }, 300);  // Adds a delay of 300ms
  }
});

Result: Filters run only after typing stops, improving performance.

Issue 4: Creating New Arrays Every Time

AngularJS filters like filter, orderBy, and limitTo return a new array instead of modifying the original.

Solution: Cache the filtered result in the controller.

$scope.getFilteredItems = function() {
  if (!$scope.cachedItems) {
    $scope.cachedItems = $filter('filter')($scope.items, $scope.searchQuery);
  }
  return $scope.cachedItems;
};

<li ng-repeat="item in getFilteredItems()">
  {{ item.name }}
</li>

Result: Avoids redundant filtering operations.

3. Performance Optimization Techniques

Use Filters in Controllers Instead of Views
Perform filtering in the controller rather than directly in ng-repeat.

Use One-Time Binding (::)
For static data, use one-time binding to prevent unnecessary re-evaluations.

<p>{{ ::staticData | uppercase }}</p>

Use track by in ng-repeat
Prevents AngularJS from re-rendering the DOM unnecessarily.

<li ng-repeat="item in items track by item.id">
  {{ item.name }}
</li>

Use Pagination for Large Lists
Instead of filtering a huge dataset at once, implement pagination.