AngularJS performance tips

AngularJS performance tips

AngularJS has some problems with perfromance if its, but it also has great tools to fight with those problems. Here are some of my tips.

Angular 1.3+
My twitter: @constjs

B48000922680b510078188df438184dd?s=128

Piotr Lewandowski

October 30, 2015
Tweet

Transcript

  1. AngularJS performance tips Piotr Lewandowski @piotlr

  2. Runtime Startup Profiling 2

  3. Runtime 3

  4. Avoid watchers - why? 4 $digest loop Runs by ngClick,

    ngModel, $http, $timeout … more watchers → longer $digest frequent $digest → slower app
  5. $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
  6. Avoid watchers - unbind watchers var unbindWatcher = $scope.$watch( "model",

    function(newValue) { // init ... unbindWatcher(); }); 6
  7. one time binding {{ :: anything }} 7 → $parse(‘::

    anything’);
  8. one time binding <li ng-repeat="item in :: items"> {{ item.name

    }} </li> 8 <div some-directive name=":: myName" color="My color: {{ :: myColor }}"> </div>
  9. :: play around 9

  10. ng-if • Removes element from DOM • Reduces amount of

    watchers 10 • Change is costful • use ng-show for often changes
  11. 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>
  12. ng-model-options <input type="search" ng-model="vm.search" ng-model-options="{ updateOn: 'blur' }"> 12

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

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

    {'default': 300, 'blur': 0} }">
  15. Startup time 15

  16. Network optimizations 16 Concatenation → Minification → Obfuscation

  17. Strict DI <body ng-app="app" ng-strict-di> 17 /* @ngInject */ function

    Pages(WPApi) { // ... } /* @ngInject */ Pages.$inject = ['WPApi'];
  18. Enable $applyAsync app.config(function ($httpProvider) { $httpProvider.useApplyAsync(true); }); 18

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

  20. Lazy loading 20

  21. 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
  22. Profiling 22

  23. Game rules Always measure before optimization Always compare Remember 80

    / 20 rule 23
  24. Extension: angular-performance 24 - Count watchers - Digest loops /

    second - Time of last digest loop - Timeline DEMO
  25. Questions 25