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

Transcript

1. AngularJS
   performance tips
   Piotr Lewandowski
   @piotlr
   

   View Slide

2. Runtime
   Startup
   Profiling
   2
   

   View Slide

3. Runtime
   3
   

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

8. one time binding
   
   {{ item.name }}
   
   8
   name=":: myName"
   color="My color: {{ :: myColor }}">
   
   

   View Slide

9. :: play around
   9
   

   View Slide

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

    View Slide

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
    
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. Startup time
    15
    

    View Slide

16. Network optimizations
    16
    Concatenation
    →
    Minification
    →
    Obfuscation
    

    View Slide

17. Strict DI
    

    View Slide

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

    View Slide

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

    View Slide

20. Lazy loading
    20
    

    View Slide

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
    

    View Slide

22. Profiling
    22
    

    View Slide

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

    View Slide

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

    View Slide

25. Questions
    25
    

    View Slide