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.8k
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
490
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
Android 15以上でPDFのテキスト検索を爆速開発!
tonionagauzzi
0
200
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
110
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
270
新しいモバイルアプリ勉強会(仮)について
uetyo
1
260
DataformでPythonする / dataform-de-python
snhryt
0
170
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
530
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
12
2.6k
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
270
自作OSでDOOMを動かしてみた
zakki0925224
1
1.3k
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
1
210
iOS開発スターターキットの作り方
akidon0000
0
250
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
290
Featured
See All Featured
Producing Creativity
orderedlist
PRO
347
40k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Side Projects
sachag
455
43k
Visualization
eitanlees
146
16k
Agile that works and the tools we love
rasmusluckow
329
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
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