Download to read offline
![The magic line
myApp.config(['$compileProvider',
function ($compileProvider) {
$compileProvider.debugInfoEnabled(false);
}]);
Bartłomiej Narożnik - AngularJS performance 23](https://cdn.statically.io/img/image.slidesharecdn.com/angularperformance-170927102306/75/AngularJS-1-x-as-fast-as-a-lightning-23-2048.jpg)
AngularJS (1.x) as fast as a lightning
- 1. AngularJS (1.x) as fastas a lightning Bartłomiej Narożnik
- 2. Agenda • watch expressions •ng-repeat • filters • binding • synchronous and asynchronous apply • To optimize or not to optimize? Bartłomiej Narożnik - AngularJS performance 2
- 3. Digest cycle Bartłomiej Narożnik- AngularJS performance 3 action scope.$apply() Start from root scope Check all watchers for scope Check for more scopes Update UI switch to scope no changes value changed all done
- 4. • User actions(ng-click, ng-model, etc.) • $scope.$apply(), $scope.$digest() • $timeout, $interval • $q promises resolvance • $http responses i.e. a lot of things… Bartłomiej Narożnik - AngularJS performance 4 When digest runs action scope.$apply()
- 5. Watch expressions • {{}} bindings • $scope.$watch() • Most directives (like ng-show) • filters: {{date | howLongAgo}} • ng-repeat • Scope variables scope: {bar: '='} • And others… Bartłomiej Narożnik - AngularJS performance 5 Start from root scope Check all watchers for scope Check for more scopes
- 6. $watch() Bartłomiej Narożnik -AngularJS performance 6
- 7. Making watch faster ($watchCollection) BartłomiejNarożnik - AngularJS performance 7 $scope.$watch('someHugeList', function() {}, true); $scope.$watchCollection('someHugeList', function() {});
- 8. Making watch faster (Deepwatch a subset) Bartłomiej Narożnik - AngularJS performance 8 $scope.$watch('bookList', function() {}, true); $scope.$watch( function() {return _.pluck($scope.bookList, 'id');}, function() {}, true );
- 9. Making watch faster BartłomiejNarożnik - AngularJS performance 9 • Make change handler simpler • Avoid functions in watchers or bindings • Have less watches
- 10. Make watch faster (Don’tuse watch) Bartłomiej Narożnik - AngularJS performance 10 // JavaScript (controller) function updateTitle() {...} scope.$watch('title', updateTitle); // HTML <input type='text' ng-model='title'> //JavaScript (controller) $ctrl.saveTitle = function () {...}; // HTML <input type='text' ng-model='title' ng-keyup='saveTitle()'>
- 11. Unbind watch Bartłomiej Narożnik- AngularJS performance 11 scope.$watch('title', function(newVal, oldVal){}); var unbinder = scope.$watch('title', function(newVal, oldVal){}); //this line removes the watch from $$watchers. unbinder();
- 12. Destroy! Bartłomiej Narożnik -AngularJS performance 12 $scope.$on('$destroy', function () { // clean up }); What to clean: • scope.$watch • scope.$on • element.on • $timeout • Any other shared variable or reference
- 13. ng-repeat Bartłomiej Narożnik -AngularJS performance 13
- 14. ng-repeat optimization (track by) <divng-repeat='word in book'> scope.book = refreshBook(); <div ng-repeat='word in book track by word.Key'> *Introduced in Angular 1.2 Bartłomiej Narożnik - AngularJS performance 14
- 15. ng-repeat optimization (pagination) <div ng-repeat='wordin $ctrl.book'> <div ng-repeat='word in $ctrl.bookPage'> Bartłomiej Narożnik - AngularJS performance 15
- 16. ng-repeat optimization (bind-html) Bartłomiej Narożnik- AngularJS performance 16 <ul> <li ng-repeat='word in $ctrl.book'>…</li> </ul> <ul ng-bind-html='$ctrl.wordList'></ul>
- 17. ng-show vs ng-if(ng-switch) •How frequently will it change? • How heavy is the scope? Bartłomiej Narożnik - AngularJS performance 17
- 18. Filters <ul> <li ng-repeat='word in$ctrl.book | filter:"X"'>…</li> </ul> // JavaScript (controller) $ctrl.filteredWords = $filter('filter')($ctrl.book, 'X'); // HTML <ul> <li ng-repeat='word in $ctrl.filteredWords'>…</li> </ul> Bartłomiej Narożnik - AngularJS performance 18
- 19. One-time binding <span>{{ ::$ctrl.title}}</span> <ul> <li ng-repeat='page in ::$ctrl.pages'></li> </ul> *Introduced in Angular 1.3 Bartłomiej Narożnik - AngularJS performance 19
- 20. <input type='text' name='searchTerm' ng-model='search.value' ng-model-options='{debounce: 250 }' /> Debounce Bartłomiej Narożnik - AngularJS performance 20
- 21. $digest vs $apply $scope.bookTitle= 'New Title'; $scope.$digest(); $scope.$apply(function () { $scope.bookTitle = 'New Title'; }); Bartłomiej Narożnik - AngularJS performance 21
- 22. $evalAsync, $applyAsync $element.on('mouseup', function() { // do mouseup stuff $scope.$applyAsync(); }); $element.on('click', function () { // do click stuff $scope.$applyAsync(); }); Bartłomiej Narożnik - AngularJS performance 22
- 23. The magic line myApp.config(['$compileProvider', function($compileProvider) { $compileProvider.debugInfoEnabled(false); }]); Bartłomiej Narożnik - AngularJS performance 23
- 24. Have you triedAngular 2+? Bartłomiej Narożnik - AngularJS performance 24
- 25. When should youoptimize? If your optimization makes the program harder to understand, then it's a premature optimization. Bartłomiej Narożnik - AngularJS performance 25
- 26. Bartłomiej Narożnik -AngularJS performance 26 Premature optimization is the root of all evil Donald Knuth
- 27. Coming soon… Bartłomiej Narożnik- AngularJS performance 27
- 28.
- 29.
Editor's Notes
- #8 watch with three parameters makes deep comparison, watch collection only shallow (on first level)
- #11 Use callbacks or events instead of $watch function
- #13 You should always explicitly call your $on('$destroy'), unbind all your watchers and event listeners, and cancel any instances of $timeout, or other asynchronous ongoing interactions. Not doing so will keep them running in the background, wasting your CPU and RAM. Failing to do so will cause memory leaks in older browser, and slow down your Garbage Collector in modern browsers. A very important corollary is that you need to remember to call scope.$destroy before you remove the DOM.
- #19 Filters are run twice on every digest cycle. First, when the watcher is triggered from changes, and a second time to check any further changes in the digest cycle. Similar to ng-show, filters hide the filtered elements with CSS but do not remove those elements from the DOM.
- #22 If you are listening to an JavaScript event that happens outside of the Angular ecosystem (jQuery click events for example), you may need to manually trigger a digest cycle to notify other components of your changes. The scope.$apply function triggers at the $rootScope and travels to all child scopes triggering all watchers in the application. Alternatively, the scope.$digest function only triggers a digest cycle on itself and its own child nodes. Thus, you only need to use scope.$apply if a parent scope needs to know about the changes.
- #23 Instead of triggering a digest for both the mouseup and the click $evalAsync() will execute in the current digest $applyAsync() in a scheduled one