Course Progress 92%

AngularJS Performance Optimisation

← AngularJS Error Handling AngularJS Testing →

AngularJS powerful framework है, लेकिन large applications में अगर सही तरीके से use न किया जाए तो performance issues आ सकते हैं। Performance optimisation का मतलब है application को fast, responsive और scalable बनाना, खासकर तब जब data, watchers और DOM complexity बढ़ जाती है।

इस chapter में आप सीखेंगे:

  • AngularJS performance issues क्यों आते हैं
  • Digest cycle का performance पर impact
  • Watchers optimization
  • DOM और directives optimization
  • Data binding best practices
  • Real-world optimization techniques

AngularJS में Performance Issues क्यों आते हैं

AngularJS में:

  • Two-way data binding
  • Large number of watchers
  • Complex DOM structure
  • Frequent digest cycles

इन सबका direct effect performance पर पड़ता है।

Digest Cycle और Performance

AngularJS digest cycle हर change पर expressions evaluate करता है।

$scope.$watch("value", function(newVal, oldVal) {
});

Explanation

  • हर watcher digest cycle में execute होता है
  • ज्यादा watchers = slow performance
  • Optimization जरूरी है

Reduce Watchers

Bad Practice

<div ng-repeat="item in items">
  {{ item.name }}
</div>

Issue Explanation

  • हर item के लिए multiple watchers create होते हैं
  • Large lists में app slow हो जाती है

Good Practice: One-time Binding

<div ng-repeat="item in items">
  {{ ::item.name }}
</div>

Explanation

  • :: one-time binding है
  • Value load होने के बाद watcher remove हो जाता है
  • Performance improve होती है

Limit ng-repeat Usage

track by for Better Performance

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

Explanation

  • AngularJS DOM elements efficiently reuse करता है
  • Re-rendering कम होती है

Avoid Deep Watches

Bad Practice

$scope.$watch("user", function() {
}, true);

Explanation

  • Deep watch expensive होता है
  • हर property change detect होती है

Better Alternative

$scope.$watch("user.name", function() {
});

Explanation

  • Specific property watch होती है
  • Performance better रहती है

Use Controllers Efficiently

  • Controllers lightweight रखें
  • Heavy logic services में रखें
  • Scope variables कम रखें
app.controller("ctrl", function($scope) {
  $scope.count = 0;
});

Explanation

  • Minimal scope bindings
  • Fast digest cycle

Avoid Functions in Expressions

Bad Practice

<p>{{ getTotal() }}</p>

Explanation

  • Function हर digest cycle में call होती है
  • Performance degrade होती है

Good Practice

<p>{{ total }}</p>

$scope.total = calculateTotal();

Explanation

  • Pre-calculated value bind होती है
  • Digest fast रहता है

Optimize Directives

  • Isolated scope use करें
  • Unnecessary $watch avoid करें
  • DOM manipulation minimal रखें
app.directive("myDir", function() {
  return {
    scope: {},
    template: "<p>Optimized</p>"
  };
});

Explanation

  • Isolated scope watchers reduce करता है
  • Directive reusable और fast बनता है

Debounce Events

<input ng-model="search" ng-model-options="{ debounce: 500 }">

Explanation

  • Digest cycle frequency कम होती है
  • Typing smooth रहती है

Pagination and Virtualization

Large data lists के लिए:

  • Pagination use करें
  • Infinite scroll implement करें
<li ng-repeat="item in items | limitTo:10"></li>

Explanation

  • DOM elements कम रहते हैं
  • Rendering fast होती है

Disable Debug Info in Production

app.config(function($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
});

Explanation

  • AngularJS internal debug data remove करता है
  • Production performance improve होती है

Use $applyAsync and $evalAsync

$scope.$applyAsync(function() {
  $scope.data = value;
});

Explanation

  • Multiple updates batch में run होते हैं
  • Digest cycles reduce होते हैं

Memory Leak Avoidance

  • $interval और $timeout clear करें
  • Event listeners destroy करें
$scope.$on("$destroy", function() {
});

Explanation

  • Unused watchers remove होते हैं
  • Long-running apps stable रहती हैं

Common Performance Mistakes

  • Excessive two-way binding
  • Large ng-repeat without optimization
  • Watch functions misuse करना
  • Production में debug mode रखना

Best Practices Summary

  • Watchers कम रखें
  • One-time binding use करें
  • Functions in expressions avoid करें
  • Services में logic रखें
  • Production optimisations enable करें

Summary

इस chapter में आपने सीखा:

  • AngularJS performance bottlenecks
  • Digest cycle optimization
  • Watchers और bindings optimise करना
  • DOM और directives performance tips
  • Real-world best practices
← AngularJS Error Handling AngularJS Testing →
  • Home