Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Angular Performance Tuning
damienklinnert
April 26, 2014
Programming
4
210
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
67
Angular Performance Talk
damienklinnert
0
55
Fight the Rot - Refactor stinky JavaScript
damienklinnert
0
130
modern web apps
damienklinnert
0
93
Become a node package maintainer
damienklinnert
1
69
bootstrap single page apps
damienklinnert
1
290
test your nodejs code
damienklinnert
5
280
Other Decks in Programming
See All in Programming
Keep Your Cache Always Fresh With Debezium
gunnarmorling
0
190
CIでAndroidUIテストの様子を録画してみた
mkeeda
0
170
SRE NEXT 2022: Sensible Incident Management for Software Startups
takanabe
2
260
Microsoft Teams の 会議アプリ開発のはじめかた / How to start Microsoft Teams app development
karamem0
0
1.5k
アプリのログをチーム外で活用してもらうためにやったこと
shotakashihara
0
170
JGS594 Lecture 23
javiergs
PRO
0
400
【Qiita Night】新卒エンジニアによるSwift6与太予想
eiji127
0
180
Named Document って何?
harunakano
0
360
코드 품질 1% 올리기
pluu
1
950
偏見と妄想で語るスクリプト言語としての Swift / Swift as a Scripting Language
lovee
2
240
Kueue入門/Kueue Introduction
bells17
0
510
Yumemi.apk #6 ~ゆめみのAndroidエンジニア 日頃の成果大発表会!~ Session 2
blendthink
1
200
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
3
430
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.6k
Bash Introduction
62gerente
596
210k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
WebSockets: Embracing the real-time Web
robhawkes
57
5k
Product Roadmaps are Hard
iamctodd
34
6.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.1k
YesSQL, Process and Tooling at Scale
rocio
157
12k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
212
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
350
21k
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2k
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