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
560
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.6k
DevTools of The Future, JSCONF Asia 2016, Singapore
auchenberg
3
280
Future of DevTools, Full Stack Tech 2016, Argentina
auchenberg
0
180
JSCONF Columbia 2016: DevTools for the Progressive Web
auchenberg
1
350
JSCONF China 2016: DevTools for the Progressive Web
auchenberg
2
400
Edge DevTools Summer 2016
auchenberg
0
170
Web Rebels 16: DevTools for the Progressive Web
auchenberg
1
240
AtTheFrontend 16: DevTools for the Progressive Web
auchenberg
1
270
Other Decks in Programming
See All in Programming
Git Lint
bkuhlmann
4
750
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
0
220
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
Let's learn code review
riofujimon
1
310
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
330
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
Goのmultiple errorsについて (2024年4月版)
syumai
3
840
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
320
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
140
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
650
Milestoner
bkuhlmann
1
410
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
330
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
GraphQLとの向き合い方2022年版
quramy
32
12k
Building Adaptive Systems
keathley
31
1.9k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
What the flash - Photography Introduction
edds
64
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Code Reviewing Like a Champion
maltzj
514
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