AngularJS performance tips Piotr Lewandowski @piotlr 

Runtime Startup Profiling 2 

Runtime 3 

Avoid watchers - why? 4 $digest loop Runs by ngClick, ngModel, $http, $timeout … more watchers → longer $digest frequent $digest → slower app 

$watch optimizations ● single $watch is fast actually… ● deep $watch is slow, don’t overuse it $scope.$watch("collection", fn, true); ● Use $watchCollection instead of deep $watch $scope.$watchCollection("collection", fn); Note: {{ expression }} ←→ $scope.$watch("expression", fn); 5 

Avoid watchers - unbind watchers var unbindWatcher = $scope.$watch( "model", function(newValue) { // init ... unbindWatcher(); }); 6 

one time binding {{ :: anything }} 7 → $parse(‘:: anything’); 

one time binding

{{ item.name }}

8 

:: play around 9 

ng-if ● Removes element from DOM ● Reduces amount of watchers 10 ● Change is costful ● use ng-show for often changes 

track by ● ng-repeat always clears DOM by default ● track by prevents recalculating DOM for known values Mostly can’t use one-time binding and track by at once 11



ng-model-options 12 

ng-model-options 13 

ng-model-options 14 

Startup time 15 

Network optimizations 16 Concatenation → Minification → Obfuscation 

Strict DI 17 /* @ngInject */ function Pages(WPApi) { // ... } /* @ngInject */ Pages.$inject = ['WPApi']; 

Enable $applyAsync app.config(function ($httpProvider) { $httpProvider.useApplyAsync(true); }); 18 

Disable debug informations app.config(function ($compileProvider) { $compileProvider.debugInfoEnabled(false); }); 19 

Lazy loading 20 

ocLazyLoad 21 ● Less data to load on start ● Low cost of loading new modules ● Memory consumption PROFIT ● Workaround for Angular 1.x ● Adding new modules is painful* * Different strategy for production and local development 

Profiling 22 

Game rules Always measure before optimization Always compare Remember 80 / 20 rule 23 

Extension: angular-performance 24 - Count watchers - Digest loops / second - Time of last digest loop - Timeline DEMO 

Questions 25