Angular performance talk

0 views

Published on

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
0
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Angular performance talk

  1. 1. Supercharge AngularJS Performance Measurement and Tuning &&Sebastian Fröstl Damien Klinnert
  2. 2. We <3 angular.js
  3. 3. Hello world! world <h3>Hello {{name}}</h3> <input ng-model="name">
  4. 4. Behind the AngularJS magic
  5. 5. One: Address book Demo | Demo fixed
  6. 6. Avoid watching invisible elements limit number of watches, use ng-if instead of ng-show
  7. 7. Two: Bakery Demo | Demo fixed
  8. 8. No complex watch statements precalculate and cache results, make watches simple and fast
  9. 9. Three: Numbers Demo | Demo fixed
  10. 10. Ensure DOM updates are batched don't use ng-include in ng-repeat, prefill the template cache
  11. 11. Workflow “Performance tuning – set expectations, measure, tune, and repeat” – {1} 1. Have a problem (no premature optimizations) 2. Set time/ budget limits 3. Measure correctly 4. Find main bottle necks 5. Fix bottlenecks one by one (constantly measure and evaluate new state)
  12. 12. Wrap up AngularJS detects model changes by dirty checking. Within the $digest cycle a previous stored value is compared to the actual model value. Process is repeated until models are stable One: Don't watch for invisible (ng-if > ng-show) Two: Avoid complex watch-expressions Three: Ensure DOM updtes are batched Workflow: detect problem, set expectations, measure, fix, repeat * Small Improvements is hiring
  13. 13. References 1. Mastering Web Application Development with AngularJS, Pawel Kozlowski, Peter Bacon Darwin, Packt Publishing, 23. August 2013 2. 3. 4. 5. 6. 7. AngularJS Performance Tuning for Long Lists Optimizing AngularJS: 1200ms to 35ms Analysing Performance of AngularJS Screens Misco Hevery on AngularJS performance AngularJS: 6 Common Pitfalls Using Scopes Bindonce: Zero watches binding for AngularJS

×