Angular Performance Tuning

Angular Performance Tuning

for large Apps (presented at JSUnconf)

9809d0f32f9e4e3f4b14ce26400c0866?s=128

damienklinnert

April 26, 2014
Tweet

Transcript

  1. Angular Performance Tuning for large apps

  2. None
  3. What is a fast app?

  4. None
  5. I clicked the button... and nothing ever happened! — Random

    User
  6. This spinner never stops, maybe I need to hit reload...

    — Frustrated User
  7. Scrolling the page feels awkward, somehow... — Enraged User

  8. None
  9. < 100 Update the UI in less than 100ms to

    make it feel instant
  10. loading spinners avoid them, preload data instead

  11. > 60 fps For smooth scrolling, only rerender parts

  12. None
  13. None
  14. Unfortunately [...] it is easy to build slow apps when

    you don't know what you are doing. — Misko Hevery
  15. Dirty Checking a.k.a. The Magic™ behind angular.JS

  16. None
  17. None
  18. None
  19. Minimize number of registered watchers

  20. Maximize performance of registered watchers

  21. Simple Measures

  22. Use ng-if instead of ng-show <button ng-click="expanded = !expanded"> Show

    details </button> <div ng-if="expanded"> <div ng-include="complex.html"></div> </div> docs.angularjs.org/api/ng/directive/ngIf
  23. bind-once <li bindonce ng-repeat="person in persons"> <span bo-text="person.name"></span> </li> //

    see bo-href, bo-src, bo-class, bo-html github.com/Pasvaz/bindonce
  24. Precalculate properties // bad idea <li ng-repeat="person in persons"> {{person.expensiveComputation()}}

    </li> // way better idea <li ng-repeat="person in persons"> {{person.preCalculatedResult}} </li>
  25. Advanced Measures

  26. Pagination <li ng-repeat="person in persons"> {{person.name}} </li> // better <li

    ng-repeat="person in persons | paginate:page"> {{person.name}} </li> github.com/UnicodeSnowman/angular-paginate-filter
  27. Infinite Scrolling <div infinite-scroll="loadMore()"> <span ng-repeat="person in persons"> {{person.name}} </span>

    </div> $scope.loadMore = function() { var offset = $scope.persons.length; var more = $scope.allPersons.slice(offset, offet+20) $scope.persons = $scope.persons.concat(more); }; // binarymuse.github.io/ngInfiniteScroll/
  28. Cache calculated properties function Collection(els, size) { /* ... */

    } createDynamicProperties(Collection, { view: ['els', 'size', 'page', function () { var offset = this.page * this.size; return this.els.slice(offset, offset.this.size); }] }); <div ng-repeat="person in collection.view"> {{person.name}} </div> github.com/damienklinnert/angular-model
  29. Extreme Measures

  30. Scalyr Directives <div sly-repeat="person in persons"> {{person.name}} </div> // also

    see sly-evaluate-only-when, // sly-prevent-evaluation-when-hidden github.com/scalyr/angular
  31. Angular Fastscroll <div fastscroll collection="user in users" item-height="40"> <div class="item">{{

    user.name }}</div> </div> // github.com/damienklinnert/fastscroll-demo
  32. Angular+React <table ng-react-component="Repeater" data="data"> </table> var Repeater = React.createClass({ render:

    function () { var scope = this.props.scope; } }); // davidchang.github.io/ngReact/
  33. Premature optimization is the root of all evil — Donald

    Knuth
  34. The performance tuning workflow 1. Set expectations 2. Measure 3.

    Find bottlenecks 4. Fix it 5. Repeat
  35. Where to go from here? (Tooling) — Chrome DevTools —

    Batarang Plugin — angular-instruments github.com/damienklinnert/angular- instruments
  36. Where to go from here? (Reading) — Databinding in AngularJS

    bit.ly/ 1lfMRhj — AngularJS Performance Tuning for Long Lists bit.ly/1tNzbht — Analysing Performance of AngularJS Screens bit.ly/QHRoOc — Brian talks about angular with lots of data bit.ly/RUV6oA