AngularJS performance tips

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 <li ng-repeat="item in :: items"> {{ item.name
}} </li> 8 <div some-directive name=":: myName" color="My color: {{ :: myColor }}"> </div>

:: 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 <li ng-repeat="step in steps track by $index"> </li>

ng-model-options <input type="search" ng-model="vm.search" ng-model-options="{ updateOn: 'blur' }"> 12

ng-model-options 13 <input type="search" ng-model="vm.search" ng-model-options="{ updateOn: 'default blur' }">

ng-model-options 14 <input type="search" ng-model="vm.search" ng-model-options="{ updateOn: 'default blur', debounce:
{'default': 300, 'blur': 0} }">

Startup time 15

Network optimizations 16 Concatenation → Minification → Obfuscation

Strict DI <body ng-app="app" ng-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

AngularJS performance tips

AngularJS performance tips

Piotr Lewandowski

More Decks by Piotr Lewandowski

Other Decks in Programming

Featured

Transcript