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
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
380
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
390
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
240
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
新宿ダンジョンを可視化してみた
satoshi7190
2
270
SIMD Parallel Programming with the Vector API
josepaumard
0
190
ゆるい個人開発のススメ
kuroppe1819
10
990
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
GitHub Copilotのススメ
marcy731
1
200
Ruby Pattern Matching
bkuhlmann
0
930
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
650
Featured
See All Featured
The Mythical Team-Month
searls
216
42k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Git: the NoSQL Database
bkeepers
PRO
422
63k
How to name files
jennybc
65
93k
Faster Mobile Websites
deanohume
299
30k
For a Future-Friendly Web
brad_frost
172
9k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
4 Signs Your Business is Dying
shpigford
175
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
RailsConf 2023
tenderlove
4
540
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