AngularJS performance & production tips
•
123 likes•41,487 views
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
Recommended
More Related Content
What's hot
What's hot (20)
Similar to AngularJS performance & production tips
Similar to AngularJS performance & production tips (20)
More from Nir Kaufman
More from Nir Kaufman (20)
Recently uploaded
Recently uploaded (20)
AngularJS performance & production tips
- 1. Performance tips & techniques Nir@500tech.com
- 3. Nir Kaufman Head of AngularJS development department @ Nir@500tech.com Nir@500tech.com
- 4. all examples and reference code are written in ES6 Nir@500tech.com
- 5. It’s really easy to abuse AngularJS Nir@500tech.com
- 6. no conventions. very easy to start to much opinions out there using angular blindly (magic) Why? Nir@500tech.com
- 7. so, those angular has built-in performance issues? Nir@500tech.com
- 8. just like any other framework. (if you don’t understand what’s going on under the curtain) Nir@500tech.com
- 9. when you encounter a performance issue, what do you do? Nir@500tech.com
- 10. stack overflow google angular documents source code Nir@500tech.com
- 11. how can we avoid angular performance issues? Nir@500tech.com
- 12. read the source code. https://github.com/angular/angular.js Nir@500tech.com
- 13. rewrite the source code! http://teropa.info/build-your-own-angular/ Nir@500tech.com
- 15. what’s compile mean in angular? Nir@500tech.com
- 16. The compilation is a process of walking the DOM tree and matching DOM elements to directives. Nir@500tech.com
- 17. TIP# 1 set the debugInfoEnabled to false with $compileProvider Nir@500tech.com
- 18. why? AngularJS attaches information about scopes to DOM nodes, and adds CSS classes to data-bound elements. Nir@500tech.com
- 20. TIP# 2 split your code between compile and link in custom directives Nir@500tech.com
- 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
- 23. TIP# 3 prefer using ng-if/switch directive instead of ng-show/hide Nir@500tech.com
- 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
- 26. optimise the digest cycle Nir@500tech.com
- 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. TIP# 4 reduce the number of digests cycles with ng-model-options
- 29. why? by default, angular triggers the digest cycle every time the value changes
- 31. TIP# 5 when make sense, use $digest instead of $apply
- 32. why? $apply calls digest from the rootScope which may not be necessary
- 34. TIP# 5 prefer DOM manipulation in custom directives when not related to model Nir@500tech.com
- 35. why? the built-in DOM manipulation directives adds watchers to the scope
- 37. TIP# 6 reduce the number of watchers with oneTimeBinding feature Nir@500tech.com
- 38. why? angular invoke all the watchers that registered on the scope on each digest
- 41. TIP# 7 always use ‘track by’ in ngRepeat to maximise performance Nir@500tech.com
- 42. why? ng-repeat destroy an recreate DOM nodes when the data is refreshing
- 44. TIP# 8 use ng-hide when filtering the repeated items Nir@500tech.com
- 45. why? ng-repeat removes DOM nodes from your HTML and recreate them on filtering
- 47. TIP# 9 use ng-if to link DOM elements on demand Nir@500tech.com
- 48. why? ng-if removes nodes from the DOM so the list will render faster
- 51. TIP# 10 decorate AngularJS $exceptionHandler with your own logic Nir@500tech.com
- 52. why? uncaught exceptions in angular expressions is delegated to this service
- 54. TIP# 11 always use $log service for you debug logs Nir@500tech.com
- 55. why? you can switch the $log service debug method off on production
- 57. TIP# 12 bootstrap in strictDi mode Nir@500tech.com
- 58. why? even if you use automated tools to guarantee implicit strict-di mode will backup you by throwing exceptions
- 60. TIP# 13 cache your templates Nir@500tech.com
- 61. why? angular loads templates dynamically using http when they requested for the first time
- 63. grab the code https://github.com/nirkaufman/angularjs-performance-tips http://tinyurl.com/pwodl8b
- 64. Thank you!