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
270
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
79
Angular Performance Talk
damienklinnert
0
120
Fight the Rot - Refactor stinky JavaScript
damienklinnert
0
170
modern web apps
damienklinnert
0
120
Become a node package maintainer
damienklinnert
1
88
bootstrap single page apps
damienklinnert
1
300
test your nodejs code
damienklinnert
5
360
Other Decks in Programming
See All in Programming
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
260
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
700
GPUを計算資源として使おう!
primenumber
1
290
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.3k
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
830
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.5k
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
190
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
Googleの新しいコーディングAIエージェントJulesを使ってみた
tonionagauzzi
0
140
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.5k
Building an army of robots
kneath
306
45k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Building a Scalable Design System with Sketch
lauravandoore
462
33k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Being A Developer After 40
akosma
90
590k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Done Done
chrislema
184
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Fireside Chat
paigeccino
37
3.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
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