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 Tuning
Search
damienklinnert
April 26, 2014
Programming
4
250
Angular Performance Tuning
for large Apps (presented at JSUnconf)
damienklinnert
April 26, 2014
Tweet
Share
More Decks by damienklinnert
See All by damienklinnert
angular decorate
damienklinnert
1
73
Angular Performance Talk
damienklinnert
0
100
Fight the Rot - Refactor stinky JavaScript
damienklinnert
0
150
modern web apps
damienklinnert
0
100
Become a node package maintainer
damienklinnert
1
80
bootstrap single page apps
damienklinnert
1
300
test your nodejs code
damienklinnert
5
340
Other Decks in Programming
See All in Programming
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
340
雑に思考を整理する技術と効能
konifar
60
29k
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
820
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
200
Elm 0.19.0 Changes
bkuhlmann
0
490
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4.1k
2 週間で Twitter Bot を作ってみた
contour_gara
0
560
Git Rebase
bkuhlmann
11
1.6k
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
340
PHPはいつから死んでいるかの調査
chiroruxx
1
400
使ってみよう Azure AI Document Intelligence
kosmosebi
2
320
Featured
See All Featured
Statistics for Hackers
jakevdp
789
220k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Unsuck your backbone
ammeep
663
57k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Making Projects Easy
brettharned
108
5.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Designing with Data
zakiwarfel
96
4.8k
The Invisible Side of Design
smashingmag
294
49k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Done Done
chrislema
178
15k
Typedesign – Prime Four
hannesfritz
36
2.1k
Transcript
Angular Performance Tuning for large apps
None
What is a fast app?
None
I clicked the button... and nothing ever happened! — Random
User
This spinner never stops, maybe I need to hit reload...
— Frustrated User
Scrolling the page feels awkward, somehow... — Enraged User
None
< 100 Update the UI in less than 100ms to
make it feel instant
loading spinners avoid them, preload data instead
> 60 fps For smooth scrolling, only rerender parts
None
None
Unfortunately [...] it is easy to build slow apps when
you don't know what you are doing. — Misko Hevery
Dirty Checking a.k.a. The Magic™ behind angular.JS
None
None
None
Minimize number of registered watchers
Maximize performance of registered watchers
Simple Measures
Use ng-if instead of ng-show <button ng-click="expanded = !expanded"> Show
details </button> <div ng-if="expanded"> <div ng-include="complex.html"></div> </div> docs.angularjs.org/api/ng/directive/ngIf
bind-once <li bindonce ng-repeat="person in persons"> <span bo-text="person.name"></span> </li> //
see bo-href, bo-src, bo-class, bo-html github.com/Pasvaz/bindonce
Precalculate properties // bad idea <li ng-repeat="person in persons"> {{person.expensiveComputation()}}
</li> // way better idea <li ng-repeat="person in persons"> {{person.preCalculatedResult}} </li>
Advanced Measures
Pagination <li ng-repeat="person in persons"> {{person.name}} </li> // better <li
ng-repeat="person in persons | paginate:page"> {{person.name}} </li> github.com/UnicodeSnowman/angular-paginate-filter
Infinite Scrolling <div infinite-scroll="loadMore()"> <span ng-repeat="person in persons"> {{person.name}} </span>
</div> $scope.loadMore = function() { var offset = $scope.persons.length; var more = $scope.allPersons.slice(offset, offet+20) $scope.persons = $scope.persons.concat(more); }; // binarymuse.github.io/ngInfiniteScroll/
Cache calculated properties function Collection(els, size) { /* ... */
} createDynamicProperties(Collection, { view: ['els', 'size', 'page', function () { var offset = this.page * this.size; return this.els.slice(offset, offset.this.size); }] }); <div ng-repeat="person in collection.view"> {{person.name}} </div> github.com/damienklinnert/angular-model
Extreme Measures
Scalyr Directives <div sly-repeat="person in persons"> {{person.name}} </div> // also
see sly-evaluate-only-when, // sly-prevent-evaluation-when-hidden github.com/scalyr/angular
Angular Fastscroll <div fastscroll collection="user in users" item-height="40"> <div class="item">{{
user.name }}</div> </div> // github.com/damienklinnert/fastscroll-demo
Angular+React <table ng-react-component="Repeater" data="data"> </table> var Repeater = React.createClass({ render:
function () { var scope = this.props.scope; } }); // davidchang.github.io/ngReact/
Premature optimization is the root of all evil — Donald
Knuth
The performance tuning workflow 1. Set expectations 2. Measure 3.
Find bottlenecks 4. Fix it 5. Repeat
Where to go from here? (Tooling) — Chrome DevTools —
Batarang Plugin — angular-instruments github.com/damienklinnert/angular- instruments
Where to go from here? (Reading) — Databinding in AngularJS
bit.ly/ 1lfMRhj — AngularJS Performance Tuning for Long Lists bit.ly/1tNzbht — Analysing Performance of AngularJS Screens bit.ly/QHRoOc — Brian talks about angular with lots of data bit.ly/RUV6oA