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
Measuring Performance of AngularJS applications
Search
Kenneth Auchenberg
December 11, 2015
Programming
1
640
Measuring Performance of AngularJS applications
Opbeat for AngularJS
Kenneth Auchenberg
December 11, 2015
Tweet
Share
More Decks by Kenneth Auchenberg
See All by Kenneth Auchenberg
BUILD 2017: Supercharge your JavaScript debugging workflow with VS Code 🔥
auchenberg
0
360
A future without browsers, February 2017
auchenberg
11
2.7k
DevTools of The Future, JSCONF Asia 2016, Singapore
auchenberg
3
300
Future of DevTools, Full Stack Tech 2016, Argentina
auchenberg
0
190
JSCONF Columbia 2016: DevTools for the Progressive Web
auchenberg
1
370
JSCONF China 2016: DevTools for the Progressive Web
auchenberg
2
480
Edge DevTools Summer 2016
auchenberg
0
180
Web Rebels 16: DevTools for the Progressive Web
auchenberg
1
260
AtTheFrontend 16: DevTools for the Progressive Web
auchenberg
1
330
Other Decks in Programming
See All in Programming
PipeCDのプラグイン化で目指すところ
warashi
1
280
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
820
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
Hack Claude Code with Claude Code
choplin
4
2.1k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
660
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.4k
Documentation Writing (for coders)
carmenintech
72
4.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Gamification - CAS2011
davidbonilla
81
5.4k
Code Review Best Practice
trishagee
69
18k
A designer walks into a library…
pauljervisheath
207
24k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Making Projects Easy
brettharned
116
6.3k
Done Done
chrislema
184
16k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Transcript
Measuring Performance of AngularJS apps San Francisco, December 2015 Kenneth
@auchenberg
Soo, performance?
Page load
Steve Souders
None
YSlow
PageSpeed
We build API’s to help us
Navigation Timing API https://blogs.windows.com/buildingapps/2011/08/02/measuring-mobile-site-performance-using-the-w3c-navigation-timing-api/
Resource Timing API http://www.stevesouders.com/blog/2014/11/25/serious-confusion-with-resource-timing/
Server Initial payload Browser Server-side web apps
The web has changed
Application runtime
None
Server/CDN Initial payload Browser Client-side web apps API App Page
load App boot
Client-side frameworks
Application performance Browser
Application performance
Chrome DevTools: Timeline
Chrome DevTools: CPU Profiler
Where is “my app” timeline?
None
for AngularJS
Framework specific
Trace levels App framework Browser primitives App Template Caching Storage
HTTP XHR/WebSocket MutationObservers LocalStorage Reflow Paint Rasterize Compose viewport engine
Error logging + Performance
Installation
Error logging window.onError + “magic”
Error logging 1. Error parsing 2. Stack frame generation 3.
Stack frame normalization
Code instrumentation Performance
None
Challenges
What is “app load”? (Pageload)
What is “app ready”? (DOMcontentReady)
What is “view changed”? (onhashchange)
AngularJS Page cyclus Bootstrap Router $routeChangeStart $stateChangeSuccess Controller Services $viewContentLoaded
Directives View UI Router ng-route (ngView)
What to instrument? AngularJS $resource $http $templateRequest $httpBackend $compile $module
$service $controller $cacheFactory $templateCache $directives ngBind, ngClass, ngMode, ngIf, ngInclude, ngRepeat, ngSrc, ngStyle, ngSwitch, ngTransclude
$decorate to instrument
Bootstrap module.config $decorate $rootScope $viewContentLoaded Router Route controller $stateChangeSuccess $routeChangeStart
Start transaction Instrument TraceBuffer ngOpbeat TransactionStore ngView $viewContentLoaded End transaction $routeChangeStart opbeatFunctionWrapper new Trace() Transport scheduler Processing Instrumentation flow
<DEMO>
Our breakdown
Behind the scenes
None
AngularJS $injection system …
$injection toString() madness
Replicate function arguments
Resolve loaded modules
V8 + Arguments
V8 + Arguments optimized Source: https://github.com/GoogleChrome/devtools-docs/issues/53#issuecomment-51941358 Explanation: http://stackoverflow.com/questions/29198195/whats-the-deal-with-optimising-arguments
Error stack frame normalization Firefox Chrome
SpiderMonkey naming convention Source: https://developer.mozilla.org/en-US/docs/Tools/Debugger-API/Debugger.Object#Accessor_Properties_of_the_Debugger.Object_prototype
Error stack frame normalization Normalized
opbeat.com/angularjs
github.com/opbeat/opbeat-js Open Source
None
Thanks