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
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
570
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
AI時代のUIはどこへ行く?
yusukebe
18
9.1k
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
240
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
130
旅行プランAIエージェント開発の裏側
ippo012
2
930
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
Ruby Parser progress report 2025
yui_knk
1
460
Featured
See All Featured
Docker and Python
trallard
46
3.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Documentation Writing (for coders)
carmenintech
74
5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
We Have a Design System, Now What?
morganepeng
53
7.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Code Review Best Practice
trishagee
71
19k
Designing for humans not robots
tammielis
253
25k
The Language of Interfaces
destraynor
161
25k
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