Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Performance tips & techniques
Nir@500tech.com
quick introduction
Nir@500tech.com
Nir Kaufman
Head of AngularJS development department @
Nir@500tech.com
Nir@500tech.com
all examples and reference code
are written in ES6
Nir@500tech.com
It’s really easy to
abuse AngularJS
Nir@500tech.com
no conventions.
very easy to start
to much opinions out there
using angular blindly (magic)
Why?
Nir@500tech.com
so, those angular has built-in
performance issues?
Nir@500tech.com
just like any other framework.
(if you don’t understand what’s going
on under the curtain)
Nir@500tech.com
when you encounter a performance
issue, what do you do?
Nir@500tech.com
stack overflow
google
angular documents
source code
Nir@500tech.com
how can we avoid angular
performance issues?
Nir@500tech.com
read the source code.
https://github.com/angular/angular.js
Nir@500tech.com
rewrite the source code!
http://teropa.info/build-your-own-angular/
Nir@500tech.com
optimise compilation
Nir@500tech.com
what’s compile mean
in angular?
Nir@500tech.com
The compilation is a process of
walking the DOM tree and matching
DOM elements to directives.
Nir@500tech.com
TIP# 1
set the debugInfoEnabled to false
with $compileProvider
Nir@500tech.com
why?
AngularJS attaches information about
scopes to DOM nodes, and adds CSS
classes to data-bound elements.
Nir@500tech.com
how?
production.module.js : 13
Nir@500tech.com
TIP# 2
split your code between compile
and link in custom directives
Nir@500tech.com
why?
Angular runs the compile function at
loading, but only once. the link function
will run each time the directive is in...
how?
heavy-lifting.directive.js
Nir@500tech.com
TIP# 3
prefer using ng-if/switch directive
instead of ng-show/hide
Nir@500tech.com
why?
The ng-if directive removes or recreates a
portion of the DOM. which means that the
content won’t be compiled until i...
how?
compile.tmpl.html
Nir@500tech.com
optimise the digest cycle
Nir@500tech.com
Nir@500tech.com
digest cycle
user event
(ng-click)
tick event
(interval)
server
response
apply or
digest call
start
from r...
TIP# 4
reduce the number of digests
cycles with ng-model-options
why?
by default, angular triggers the digest
cycle every time the value changes
how?
digest.tmpl.html : 35
Nir@500tech.com
TIP# 5
when make sense, use $digest
instead of $apply
why?
$apply calls digest from the rootScope
which may not be necessary
how?
digest.tmpl.html : 60
Nir@500tech.com
TIP# 5
prefer DOM manipulation in custom
directives when not related to model
Nir@500tech.com
why?
the built-in DOM manipulation
directives adds watchers to the
scope
how?
digest.tmpl.html : 44
Nir@500tech.com
TIP# 6
reduce the number of watchers
with oneTimeBinding feature
Nir@500tech.com
why?
angular invoke all the watchers
that registered on the scope on
each digest
how?
digest.tmpl.html : 75
Nir@500tech.com
optimise ng-repeat
Nir@500tech.com
TIP# 7
always use ‘track by’ in ngRepeat
to maximise performance
Nir@500tech.com
why?
ng-repeat destroy an recreate DOM
nodes when the data is refreshing
how?
repeater.tmpl.html : 20
Nir@500tech.com
TIP# 8
use ng-hide when filtering the
repeated items
Nir@500tech.com
why?
ng-repeat removes DOM nodes from
your HTML and recreate them on
filtering
how?
repeater.tmpl.html : 82
Nir@500tech.com
TIP# 9
use ng-if to link DOM
elements on demand
Nir@500tech.com
why?
ng-if removes nodes from the
DOM so the list will render faster
how?
repeater.tmpl.html : 54
Nir@500tech.com
going to production
Nir@500tech.com
TIP# 10
decorate AngularJS
$exceptionHandler with your own
logic
Nir@500tech.com
why?
uncaught exceptions in angular
expressions is delegated to this service
how?
exception-handler.decorator.js
Nir@500tech.com
TIP# 11
always use $log service for
you debug logs
Nir@500tech.com
why?
you can switch the $log
service debug method off on
production
how?
production.module.js : 12
Nir@500tech.com
TIP# 12
bootstrap in strictDi mode
Nir@500tech.com
why?
even if you use automated tools to
guarantee implicit strict-di mode will
backup you by throwing exceptions
how?
main.module.js : 25
Nir@500tech.com
TIP# 13
cache your templates
Nir@500tech.com
why?
angular loads templates
dynamically using http when
they requested for the first time
how?
gulpfile.js
Nir@500tech.com
grab the code
https://github.com/nirkaufman/angularjs-performance-tips
http://tinyurl.com/pwodl8b
Thank you!
Upcoming SlideShare
Loading in …5
×

AngularJS performance & production tips

37,671 views

Published on

This is the companion slides for the AngularJS-IL meetup 9 talk - that took place on January 13 2015 @ Google campus TLV.

Grab the code here: https://github.com/nirkaufman/angularjs-performance-tips

Published in: Technology

AngularJS performance & production tips

  1. 1. Performance tips & techniques Nir@500tech.com
  2. 2. quick introduction Nir@500tech.com
  3. 3. Nir Kaufman Head of AngularJS development department @ Nir@500tech.com Nir@500tech.com
  4. 4. all examples and reference code are written in ES6 Nir@500tech.com
  5. 5. It’s really easy to abuse AngularJS Nir@500tech.com
  6. 6. no conventions. very easy to start to much opinions out there using angular blindly (magic) Why? Nir@500tech.com
  7. 7. so, those angular has built-in performance issues? Nir@500tech.com
  8. 8. just like any other framework. (if you don’t understand what’s going on under the curtain) Nir@500tech.com
  9. 9. when you encounter a performance issue, what do you do? Nir@500tech.com
  10. 10. stack overflow google angular documents source code Nir@500tech.com
  11. 11. how can we avoid angular performance issues? Nir@500tech.com
  12. 12. read the source code. https://github.com/angular/angular.js Nir@500tech.com
  13. 13. rewrite the source code! http://teropa.info/build-your-own-angular/ Nir@500tech.com
  14. 14. optimise compilation Nir@500tech.com
  15. 15. what’s compile mean in angular? Nir@500tech.com
  16. 16. The compilation is a process of walking the DOM tree and matching DOM elements to directives. Nir@500tech.com
  17. 17. TIP# 1 set the debugInfoEnabled to false with $compileProvider Nir@500tech.com
  18. 18. why? AngularJS attaches information about scopes to DOM nodes, and adds CSS classes to data-bound elements. Nir@500tech.com
  19. 19. how? production.module.js : 13 Nir@500tech.com
  20. 20. TIP# 2 split your code between compile and link in custom directives Nir@500tech.com
  21. 21. why? Angular runs the compile function at loading, but only once. the link function will run each time the directive is inserted to the DOM Nir@500tech.com
  22. 22. how? heavy-lifting.directive.js Nir@500tech.com
  23. 23. TIP# 3 prefer using ng-if/switch directive instead of ng-show/hide Nir@500tech.com
  24. 24. why? The ng-if directive removes or recreates a portion of the DOM. which means that the content won’t be compiled until it visible. Nir@500tech.com
  25. 25. how? compile.tmpl.html Nir@500tech.com
  26. 26. optimise the digest cycle Nir@500tech.com
  27. 27. Nir@500tech.com digest cycle user event (ng-click) tick event (interval) server response apply or digest call start from root scope check all watchers on scope value changed no change more scopes? switch to scope and continue checking all done update UI angular source code, line 13991
  28. 28. TIP# 4 reduce the number of digests cycles with ng-model-options
  29. 29. why? by default, angular triggers the digest cycle every time the value changes
  30. 30. how? digest.tmpl.html : 35 Nir@500tech.com
  31. 31. TIP# 5 when make sense, use $digest instead of $apply
  32. 32. why? $apply calls digest from the rootScope which may not be necessary
  33. 33. how? digest.tmpl.html : 60 Nir@500tech.com
  34. 34. TIP# 5 prefer DOM manipulation in custom directives when not related to model Nir@500tech.com
  35. 35. why? the built-in DOM manipulation directives adds watchers to the scope
  36. 36. how? digest.tmpl.html : 44 Nir@500tech.com
  37. 37. TIP# 6 reduce the number of watchers with oneTimeBinding feature Nir@500tech.com
  38. 38. why? angular invoke all the watchers that registered on the scope on each digest
  39. 39. how? digest.tmpl.html : 75 Nir@500tech.com
  40. 40. optimise ng-repeat Nir@500tech.com
  41. 41. TIP# 7 always use ‘track by’ in ngRepeat to maximise performance Nir@500tech.com
  42. 42. why? ng-repeat destroy an recreate DOM nodes when the data is refreshing
  43. 43. how? repeater.tmpl.html : 20 Nir@500tech.com
  44. 44. TIP# 8 use ng-hide when filtering the repeated items Nir@500tech.com
  45. 45. why? ng-repeat removes DOM nodes from your HTML and recreate them on filtering
  46. 46. how? repeater.tmpl.html : 82 Nir@500tech.com
  47. 47. TIP# 9 use ng-if to link DOM elements on demand Nir@500tech.com
  48. 48. why? ng-if removes nodes from the DOM so the list will render faster
  49. 49. how? repeater.tmpl.html : 54 Nir@500tech.com
  50. 50. going to production Nir@500tech.com
  51. 51. TIP# 10 decorate AngularJS $exceptionHandler with your own logic Nir@500tech.com
  52. 52. why? uncaught exceptions in angular expressions is delegated to this service
  53. 53. how? exception-handler.decorator.js Nir@500tech.com
  54. 54. TIP# 11 always use $log service for you debug logs Nir@500tech.com
  55. 55. why? you can switch the $log service debug method off on production
  56. 56. how? production.module.js : 12 Nir@500tech.com
  57. 57. TIP# 12 bootstrap in strictDi mode Nir@500tech.com
  58. 58. why? even if you use automated tools to guarantee implicit strict-di mode will backup you by throwing exceptions
  59. 59. how? main.module.js : 25 Nir@500tech.com
  60. 60. TIP# 13 cache your templates Nir@500tech.com
  61. 61. why? angular loads templates dynamically using http when they requested for the first time
  62. 62. how? gulpfile.js Nir@500tech.com
  63. 63. grab the code https://github.com/nirkaufman/angularjs-performance-tips http://tinyurl.com/pwodl8b
  64. 64. Thank you!

×