Angular Performance 101

From JS-IL 2014, given on June 17, 2014.

Transcript

1. Angular Performance 101
2. Disclaimer
3. “Premature optimization is the root of all Evil”
4. A story
6. <div ng-repeat=“task in tasks”> <span> {{ task.title }} </span> <span> {{ task.date | fromNow }} </span> </div>
7. Why did it keep updating?
9. $interval(function() {
 $http.get(‘/events’) .success(function(events) { if (events) { $scope.events = events; } }); }, 20 * 1000);
10. Why?
11. Angular == SO. MUCH. MAGIC.
12. “With great power comes great responsibility”
13. We’ll learn How dirty checking is performed When it runs What you should do
14. The Secret
15. Magic == Dirty checking
16. How dirty checking is performed
17. Digest Loop
18. Digest == Run all watch expressions
19. $scope.$watch()
20. … and {{ stuff }}
21. … and ng-show=“foo()”
22. … and isolated scope variables scope: {foo: ‘=’}
23. … and {{ value | myFilter }}
24. … and ng-repeat itself
25. Watch Expressions $scope.$watch() {{ stuff }} ng-show=“list.length > 0” isolated scope bindings: {foo: ‘=’} filters: {{ date | fromNow }} ng-repeat Basically everything
26. When does it run?
27. User actions
28. ng-click
29. ng-change
30. ng-model
31. … and $http responses
32. … and when $q promises are resolved
33. … and when using $timeout or $interval
34. … and whenever you call $scope.$apply() or $scope.$digest()
35. When digest runs User actions (ng-click, ng-model, etc.) $http responses $q promises resolved $timeout / $interval $scope.$apply() / $scope.$digest() Basically: a lot of things
36. So? Who cares?
38. But when the shit hits the fan
39. You click and the screen freezes for a while The only* performance issue that is angular’s fault
40. Are all clicks slow? Or just a certain screen?
41. One Screen is Slow That screen has bad scopes: Too many watches Watch handlers that take too long
42. Everything is Slow Your digest loop is taking too long You’re doing it wrong
43. Pinpoint it
44. Batarang
45. See watch expression
46. See slow expressions
47. Time Your $digest console.time(‘digest’); $rootScope.$digest(); console.timeEnd(‘digest’); http://jsfiddle.net/mbRf8/
48. What you should do
49. Make watches faster
50. Making Watches Faster Switch deep watch with $watchCollection $scope.$watch(‘myList’, function() {}, true); ! $scope.$watchCollection(‘myList’, function() {});
51. Making Watches Faster Deep watch a subset $scope.$watch(‘myList’, function() {}, true); ! $scope.$watch( function() {return _.pluck($scope.myList, ‘id’);}, function() {}, true);
52. Making Watches Faster Make the change handler more performant
53. Have less watches
54. ng-repeat is your enemy
55. ng-repeat is your enemy Use track by <div ng-repeat=“task in tasks track by task.id”> http://bit.ly/1kyvet7
56. ng-repeat is your enemy Paginate <div ng-repeat=“task in tasks”> ! <div ng-repeat=“task in tasksPage”>
57. ng-repeat is your enemy Row Virtualization à-la ng-grid http://angular-ui.github.io/ng-grid/
58. ng-repeat is your enemy Bind Once https://github.com/Pasvaz/bindonce <div bindonce ng-repeat=“task in tasks”> ! <span bo-text=“task.title”></span> ! </div>
59. Have Less Watches ng-hide & ng-show elements are still there, consider using ng-if Consider replacing filters with
 pre-calculated values
60. Badass AKA “I’m Desperate”
61. Badass Mode Write an angular-less widget
62. Your Mission Pinpoint bad watches Make watches faster Use less watches
63. Thank You! Aviv Ben-Yosef @avivby www.deflect.io ! My angular & web development newsletter www.codelord.net