Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular Performance 101
Search
Aviv Ben-Yosef
June 17, 2014
Programming
1
18k
Angular Performance 101
From JS-IL 2014, given on June 17, 2014.
Aviv Ben-Yosef
June 17, 2014
Tweet
Share
More Decks by Aviv Ben-Yosef
See All by Aviv Ben-Yosef
HTTP API Design: UX for the Nitpickeriest
avivby
0
52
Stuff You Didn't Know You Can Do with RSpec
avivby
1
3.1k
Introduction to Rubinius
avivby
1
4k
DRY Introduction
avivby
1
280
How BillGuard Does MongoDB
avivby
5
3.2k
Other Decks in Programming
See All in Programming
「App Intent」よくわからんけどすごい!
rinngo0302
1
120
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
140
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
39
14k
コーディングエージェント概観(2025/07)
itsuki_t88
0
120
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
9.2k
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
5.9k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
What's new in AppKit on macOS 26
1024jp
0
160
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
680
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.2k
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
640
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Visualization
eitanlees
146
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
990
Music & Morning Musume
bryan
46
6.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
GitHub's CSS Performance
jonrohan
1031
460k
Transcript
Angular Performance 101
Disclaimer
“Premature optimization is the root of all Evil”
A story
None
<div ng-repeat=“task in tasks”> <span> {{ task.title }} </span> <span>
{{ task.date | fromNow }} </span> </div>
Why did it keep updating?
None
$interval(function() { $http.get(‘/events’) .success(function(events) { if (events) { $scope.events =
events; } }); }, 20 * 1000);
Why?
Angular == SO. MUCH. MAGIC.
“With great power comes great responsibility”
We’ll learn How dirty checking is performed When it runs
What you should do
The Secret
Magic == Dirty checking
How dirty checking is performed
Digest Loop
Digest == Run all watch expressions
$scope.$watch()
… and {{ stuff }}
… and ng-show=“foo()”
… and isolated scope variables scope: {foo: ‘=’}
… and {{ value | myFilter }}
… and ng-repeat itself
Watch Expressions $scope.$watch() {{ stuff }} ng-show=“list.length > 0” isolated
scope bindings: {foo: ‘=’} filters: {{ date | fromNow }} ng-repeat Basically everything
When does it run?
User actions
ng-click
ng-change
ng-model
… and $http responses
… and when $q promises are resolved
… and when using $timeout or $interval
… and whenever you call $scope.$apply() or $scope.$digest()
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
So? Who cares?
None
But when the shit hits the fan
You click and the screen freezes for a while The
only* performance issue that is angular’s fault
Are all clicks slow? Or just a certain screen?
One Screen is Slow That screen has bad scopes: Too
many watches Watch handlers that take too long
Everything is Slow Your digest loop is taking too long
You’re doing it wrong
Pinpoint it
Batarang
See watch expression
See slow expressions
Time Your $digest console.time(‘digest’); $rootScope.$digest(); console.timeEnd(‘digest’); http://jsfiddle.net/mbRf8/
What you should do
Make watches faster
Making Watches Faster Switch deep watch with $watchCollection $scope.$watch(‘myList’, function()
{}, true); ! $scope.$watchCollection(‘myList’, function() {});
Making Watches Faster Deep watch a subset $scope.$watch(‘myList’, function() {},
true); ! $scope.$watch( function() {return _.pluck($scope.myList, ‘id’);}, function() {}, true);
Making Watches Faster Make the change handler more performant
Have less watches
ng-repeat is your enemy
ng-repeat is your enemy Use track by <div ng-repeat=“task in
tasks track by task.id”> http://bit.ly/1kyvet7
ng-repeat is your enemy Paginate <div ng-repeat=“task in tasks”> !
<div ng-repeat=“task in tasksPage”>
ng-repeat is your enemy Row Virtualization à-la ng-grid http://angular-ui.github.io/ng-grid/
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>
Have Less Watches ng-hide & ng-show elements are still there,
consider using ng-if Consider replacing filters with pre-calculated values
Badass AKA “I’m Desperate”
Badass Mode Write an angular-less widget
Your Mission Pinpoint bad watches Make watches faster Use less
watches
Thank You! Aviv Ben-Yosef @avivby www.deflect.io ! My angular &
web development newsletter www.codelord.net