Supercharge AngularJS – Performance Measurement and Tuning
Supercharge AngularJS
Performance Measurement and Tuning
Sebastian Fröstl && Damien KlinnertWe <3 angular.js
Hello world!
<h3>Hello {{name}}</h3>
<input ng-model="name">
Behind the AngularJS magic
One: Address book
Demo | Demo fixedAvoid watching invisible elements
limit number of watches, use ng-if instead of ng-show
Two: Bakery
Demo | Demo fixedNo complex watch statements
precalculate and cache results, make watches simple and fast
Three: Numbers
Demo | Demo fixedEnsure DOM updates are batched
don't use ng-include in ng-repeat, prefill the template cache
Workflow
“Performance tuning – set expectations, measure, tune, and repeat” – {1} Have a problem (no premature optimizations) Set time/ budget limits Measure correctly Find main bottle necks Fix bottlenecks one by one (constantly measure and evaluate new state)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