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
600
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
350
A future without browsers, February 2017
auchenberg
11
2.7k
DevTools of The Future, JSCONF Asia 2016, Singapore
auchenberg
3
290
Future of DevTools, Full Stack Tech 2016, Argentina
auchenberg
0
180
JSCONF Columbia 2016: DevTools for the Progressive Web
auchenberg
1
360
JSCONF China 2016: DevTools for the Progressive Web
auchenberg
2
440
Edge DevTools Summer 2016
auchenberg
0
170
Web Rebels 16: DevTools for the Progressive Web
auchenberg
1
250
AtTheFrontend 16: DevTools for the Progressive Web
auchenberg
1
290
Other Decks in Programming
See All in Programming
CSC509 Lecture 08
javiergs
PRO
0
110
C#/.NETのこれまでのふりかえり
tomokusaba
1
160
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
52
32k
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
170
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.4k
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
harunatsujita
9
4.1k
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
230
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
110
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.7k
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
400
EventSourcingの理想と現実
wenas
6
2.1k
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
230
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Documentation Writing (for coders)
carmenintech
65
4.4k
GraphQLの誤解/rethinking-graphql
sonatard
66
10k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Practical Orchestrator
shlominoach
186
10k
A designer walks into a library…
pauljervisheath
202
24k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
How STYLIGHT went responsive
nonsquared
95
5.2k
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