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.

Dive into Angular, part 3: Performance

216 views

Published on

This presentation has been prepared by Oleksii Prohonnyi for internal Angular.js training to improve skills of newbies in JS/Angular.

Part 1 (Introduction): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-1-introduction
Part 2 (Architecture): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-2-architecture
Part 4 (Angular 2.0): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-4-angular-20
Part 5 (Experience): https://www.slideshare.net/oprohonnyi/dive-into-angular-part-5-experience

Published in: Software
  • Be the first to comment

Dive into Angular, part 3: Performance

  1. 1. DIVE INTO ANGULAR, PART 3: PERFORMANCE _by Oleksii Prohonnyi
  2. 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
  3. 3. HOW TO MEASURE PERFORMANCE
  4. 4. HOW TO MEASURE PERFORMANCE  Chrome Dev. Tools  Batarang  console.time
  5. 5. HOW TO MEASURE PERFORMANCE: DEV.TOOLS
  6. 6. HOW TO MEASURE PERFORMANCE: BATARANG
  7. 7. HOW TO MEASURE PERFORMANCE: CONSOLE
  8. 8. WATCHERS MINIMIZATION
  9. 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. 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. 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. 12. BIND ONCE
  13. 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
  14. 14. FILTERS AND CACHE
  15. 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. 16. FILTERS AND CACHE  Instead (HTML):  Do (JavaScript):  Do (HTML):
  17. 17. FILTERS AND CACHE  Instead (HTML):  Do (JavaScript):  Do (HTML):
  18. 18. NG-REPEAT
  19. 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. 20. NG-MODEL
  21. 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. 22. NG-IF VS NG-SHOW
  23. 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
  24. 24. $$APPLY VS $$DIGEST
  25. 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. 26. REFERENCES
  27. 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
  28. 28. HOME TASK
  29. 29. 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
  30. 30. Oleksii Prohonnyi facebook.com/oprohonnyi linkedin.com/in/oprohonnyi

×