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
370
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
200
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
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
380
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
140
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.5k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
530
CSC509 Lecture 06
javiergs
PRO
0
240
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.2k
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
190
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.4k
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
930
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
230
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
960
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Done Done
chrislema
185
16k
The Pragmatic Product Professional
lauravandoore
36
6.9k
We Have a Design System, Now What?
morganepeng
53
7.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Thoughts on Productivity
jonyablonski
70
4.9k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
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