Dive into Angular, part 3: Performance
Download as PPTX, PDF1 like335 views
This document discusses techniques for optimizing AngularJS performance. It begins by explaining how to measure performance using Chrome Dev Tools, Batarang, and console.time. It then discusses minimizing watchers, binding once, using filters and caching, optimizing ng-repeat, ng-model, ng-if vs ng-show, and $$apply vs $$digest. The document provides examples and references for further reading on each topic. It concludes by assigning a homework task to intentionally degrade an application's performance and then optimize it using the techniques described.
Dive into Angular, part 3: Performance
- 1. DIVE INTO ANGULAR, PART 3: PERFORMANCE _by Oleksii Prohonnyi
- 2. AGENDA How to measure performance Watchers minimization Bind once Filters and cache Ng-Repeat Ng-Model Ng-If vs Ng-Show $$apply vs $$digest References
- 4. HOW TO MEASURE PERFORMANCE Chrome Dev. Tools Batarang console.time
- 5. HOW TO MEASURE PERFORMANCE: DEV.TOOLS
- 6. HOW TO MEASURE PERFORMANCE: BATARANG
- 7. HOW TO MEASURE PERFORMANCE: CONSOLE
- 9. WATCHERS MINIMIZATION Angular uses dirty checking to keep track of all the changes in app. This means it will have to go through every watcher to check if they need to be updated (call the digest cycle). If one of the watcher is relied upon by another watcher, Angular would have to re-run the digest cycle again, to make sure that all of the changes has propagated. It will continue to do so, until all of the watchers have been updated and app has stabilized.
- 10. WATCHERS MINIMIZATION Watches are set on: $scope.$watch {{ }} type bindings Most directives (i.e. ng-show) Scope variables scope: { bar: '='} Filters {{ value | myFilter }} ng-repeat
- 11. WATCHERS MINIMIZATION Watchers (digest cycle) run on: User action (ng-click etc). Most built in directives will call $scope.apply upon completion which triggers the digest cycle. ng-change ng-model $http events (so all ajax calls) $q promises resolved $timeout $interval Manual call to $scope.apply and $scope.digest
- 12. BIND ONCE
- 13. BIND ONCE Angular 1.3 added :: notation to allow one time binding. In summary, Angular will wait for a value to stabilize after it’s first series of digest cycles, and will use that value to render the DOM element. After that, Angular will remove the watcher forgetting about that binding. See more: code.angularjs.org
- 15. FILTERS AND CACHE One time binding does not seem to play well with filters. There seems to be workarounds to make it work, but I think it’s cleaner and more intuitive to simply assign the needed value to a variable (or set it as a property on an object, if you are dealing with a lot of variables). See more: code.angularjs.org
- 16. FILTERS AND CACHE Instead (HTML): Do (JavaScript): Do (HTML):
- 17. FILTERS AND CACHE Instead (HTML): Do (JavaScript): Do (HTML):
- 18. NG-REPEAT
- 19. NG-REPEAT ngRepeat uses $watchCollection to detect changes in the collection. When a change happens, ngRepeat then makes the corresponding changes to the DOM: When an item is added, a new instance of the template is added to the DOM. When an item is removed, its template instance is removed from the DOM. When items are reordered, their respective templates are reordered in the DOM. See more: code.angularjs.org
- 20. NG-MODEL
- 21. NG-MODEL If you know there is going to be a lot of changes coming from an ng-model, you can de-bounce the input. For example if you have a search input like Google, you can de- bounce it by setting the following ng-model option: ng-model-options="{ debounce: 250 }. This will ensure that the digest cycle due to the changes in this input model will get triggered no more then once per 250ms . See more: code.angularjs.org
- 22. NG-IF VS NG-SHOW
- 23. NG-IF VS NG-SHOW ng-show will render an element, and use display:none to hide it, ng-if will actually removes the element from DOM, and will re- create it, if it’s needed. You may need ng-show for an elements that toggles on an off often, but for 95% of the time, ng-if is a better way to go. See more: docs.angularjs.org, docs.angularjs.org
- 25. $$APPLY VS $$DIGEST When $scope.$apply() is called, it kicks the entire application into the $digest loop and in turn runs $rootScope.$digest(). This is what actually kicks off the internal $digest cycle. This cycle processes all of the watchers of the $scope it was called from (and its children) until no more listeners can be fired. Instead of $scope.$apply, we could turn to $scope.$digest, which runs the exact same $digest loop, but is executed from the current $scope downwards through its children, a much less costly venture. See more: binpress.com
- 26. REFERENCES
- 27. REFERENCES https://ng-perf.com/ http://www.codelord.net/2014/06/17/angular-performance-101- slides/ http://www.alexkras.com/11-tips-to-improve-angularjs- performance/ https://medium.com/developers-writing/tips-and-practices-to- optimize-your-angularjs-app-8118550ff808#.4vmopptk9 http://blog.scalyr.com/2013/10/angularjs-1200ms-to-35ms/ https://www.binpress.com/tutorial/speeding-up-angular-js-with- simple-optimizations/135 https://www.airpair.com/angularjs/posts/angularjs-performance- large-applications
- 29. HOME TASK
- 30. HOME TASK Main idea: ruin performance of the application created after 2nd meetup and optimize it using recommendations described above. Technical details: – Update your application with more data, directives, DOM to gather bad performance issues in it: • at least 1000 rows in table on home page, • at least 2000 watchers in the application. – Optimize it using recommendations from today’s meeting. Download 2nd meetup’s application: github.com