Remember your first angular app?
- ngAllTheThings
- bind everything {{ everything | filter | filter }}
- $watch everything that moves
<div ng-repeat="item in items | filter:search | orderBy:'created_at'">
<div class="item">
<ul ng-class="{active: hovered === true}"
ng-mousenter="hovered = true"
ng-mouseleave="hovered = false">
<li ng-repeat="good in item.goods"
ng-mouseenter="showTooltip()"
ng-mouseleave="hideToolTip()">
{{ good.name }} {{ good.price | currency }}
</li>
</ul>
</div>
</div>But our apps our crawling
- the $digest cycle is the engine behind angular's magic
- when it comes to performance, the $digest cycle is your worst friend
- its all your fault
Long $digest cycles hurt
- the more watchers you have, the longer the $digest
- processing all those watchers can kill performance
- limit those watchers, speed up the $digest cylcle
What can cause a $digest
-
$scope.$apply (starts off at the $rootScope)
-
$scope.$digest (starts off at the current $scope)
-
built in directives or services like ng-click or $http which use $scope.$apply
So what is a $asqwatch?
- The watchers you didn't know you were making
- The watchers that came with that 3rd party module
- The watchers that manifested from nowhere?
- Any watcher you are not aware of or fail to optimize
We want smooth apps
-
Limit your watchers
-
Limit $digest calls
-
Don't ng-overdue it
-
Use jqLite/jq for DOM events
-
Use ng-repeat responsibly, can exponentially increase $digest times
-
Avoid filters in ng-repeat or keep them under 1ms
if you're filters take more than 1ms, it won't scale
- mcFrosty
We want smooth apps
Commit to not using these
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mousedown
- ng-mouseup
ng-scroll- ng-keydown
- ng-keyup
- ng-keypress
We want smooth apps
Use optimizations in 1.3.x
- one-time bindings {{ ::oneway }}
- ngModelOptions (debounce, updateOn)
- try not to use $stateful filters unless you must
$watch them $asqwatches
Github: @hendrixer
Twitter: @scotups
#Sasqwatch
ng-conf
By Scott Moss
