Download as PDF, PPTX
Uploaded byNir Kaufman
AngularJS performance & production tips
The document provides performance tips and techniques for optimizing AngularJS applications, including strategies such as optimizing the digest cycle, using ng-if over ng-show/ng-hide, and caching templates. It emphasizes the importance of understanding the AngularJS source code and the compilation process to avoid performance issues. Additionally, the author shares best practices for custom directives and debugging to enhance application performance.
More Related Content
Similar to AngularJS performance & production tips
AngularJS performance & production tips
- 1. Performance tips &techniques Nir@500tech.com
- 2.
- 3. Nir Kaufman Head ofAngularJS development department @ Nir@500tech.com Nir@500tech.com
- 4. all examples andreference code are written in ES6 Nir@500tech.com
- 5. It’s really easyto abuse AngularJS Nir@500tech.com
- 6. no conventions. very easyto start to much opinions out there using angular blindly (magic) Why? Nir@500tech.com
- 7. so, those angularhas built-in performance issues? Nir@500tech.com
- 8. just like anyother framework. (if you don’t understand what’s going on under the curtain) Nir@500tech.com
- 9. when you encountera performance issue, what do you do? Nir@500tech.com
- 10. stack overflow google angular documents sourcecode Nir@500tech.com
- 11. how can weavoid angular performance issues? Nir@500tech.com
- 12. read the sourcecode. https://github.com/angular/angular.js Nir@500tech.com
- 13. rewrite the sourcecode! http://teropa.info/build-your-own-angular/ Nir@500tech.com
- 14.
- 15. what’s compile mean inangular? Nir@500tech.com
- 16. The compilation isa process of walking the DOM tree and matching DOM elements to directives. Nir@500tech.com
- 17. TIP# 1 set thedebugInfoEnabled to false with $compileProvider Nir@500tech.com
- 18. why? AngularJS attaches informationabout scopes to DOM nodes, and adds CSS classes to data-bound elements. Nir@500tech.com
- 19.
- 20. TIP# 2 split yourcode between compile and link in custom directives Nir@500tech.com
- 21. why? Angular runs thecompile function at loading, but only once. the link function will run each time the directive is inserted to the DOM Nir@500tech.com
- 22.
- 23. TIP# 3 prefer usingng-if/switch directive instead of ng-show/hide Nir@500tech.com
- 24. why? The ng-if directiveremoves or recreates a portion of the DOM. which means that the content won’t be compiled until it visible. Nir@500tech.com
- 25.
- 26. optimise the digestcycle Nir@500tech.com
- 27. Nir@500tech.com digest cycle user event (ng-click) tickevent (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 thenumber of digests cycles with ng-model-options
- 29. why? by default, angulartriggers the digest cycle every time the value changes
- 30.
- 31. TIP# 5 when makesense, use $digest instead of $apply
- 32. why? $apply calls digestfrom the rootScope which may not be necessary
- 33.
- 34. TIP# 5 prefer DOMmanipulation in custom directives when not related to model Nir@500tech.com
- 35. why? the built-in DOMmanipulation directives adds watchers to the scope
- 36.
- 37. TIP# 6 reduce thenumber of watchers with oneTimeBinding feature Nir@500tech.com
- 38. why? angular invoke allthe watchers that registered on the scope on each digest
- 39.
- 40.
- 41. TIP# 7 always use‘track by’ in ngRepeat to maximise performance Nir@500tech.com
- 42. why? ng-repeat destroy anrecreate DOM nodes when the data is refreshing
- 43.
- 44. TIP# 8 use ng-hidewhen filtering the repeated items Nir@500tech.com
- 45. why? ng-repeat removes DOMnodes from your HTML and recreate them on filtering
- 46.
- 47. TIP# 9 use ng-ifto link DOM elements on demand Nir@500tech.com
- 48. why? ng-if removes nodesfrom the DOM so the list will render faster
- 49.
- 50.
- 51. TIP# 10 decorate AngularJS $exceptionHandlerwith your own logic Nir@500tech.com
- 52. why? uncaught exceptions inangular expressions is delegated to this service
- 53.
- 54. TIP# 11 always use$log service for you debug logs Nir@500tech.com
- 55. why? you can switchthe $log service debug method off on production
- 56.
- 57. TIP# 12 bootstrap instrictDi mode Nir@500tech.com
- 58. why? even if youuse automated tools to guarantee implicit strict-di mode will backup you by throwing exceptions
- 59.
- 60. TIP# 13 cache yourtemplates Nir@500tech.com
- 61. why? angular loads templates dynamicallyusing http when they requested for the first time
- 62.
- 63.
- 64.