Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Automating Web Performance Testing with PhantomJS 2
Wesley Hales
March 11, 2015
Technology
1
380
Automating Web Performance Testing with PhantomJS 2
Given at DevNexus 2015
Wesley Hales
March 11, 2015
Tweet
Share
More Decks by Wesley Hales
See All by Wesley Hales
wesleyhales
1
320
wesleyhales
0
48
wesleyhales
1
140
wesleyhales
9
970
Other Decks in Technology
See All in Technology
clustervr
0
160
torisoup
0
270
unifa_dev
0
350
omn
0
570
nihonbuson
2
1.6k
cmwatanabeseigo
0
330
tdys13
4
3.4k
yasuakiomokawa
0
330
nkjzm
1
830
shirayanagiryuji
1
400
soracom
0
270
iqbocchi
0
530
Featured
See All Featured
jonrohan
1021
380k
lara
16
2.6k
lauravandoore
11
1.2k
destraynor
146
19k
reverentgeek
27
1.9k
chriscoyier
684
180k
pauljervisheath
196
15k
jlugia
216
16k
mojombo
358
62k
qrush
285
18k
schacon
145
6.6k
danielanewman
1
470
Transcript
Automating Web Performance Testing with PhantomJS 2 Wesley Hales Shape
Security @wesleyhales
Measuring Page Load Time @wesleyhales
Date.now() || Date().getTime() • When was the page loaded? •
Add an event listener • Get the current time • Profit • Example: Simple.html @wesleyhales
However... • JavaScript time is notoriously inaccurate • It is
skewed by adjustments to the system clock • it can’t provide any data regarding the server, network, and so on. • Example: all-old.html (add HRT) @wesleyhales
DOMContentLoaded • document has been completely loaded and parsed. •
stylesheets, images, and subframes have not finished loading @wesleyhales
load || onload The load event is fired when a
resource and its dependent resources have finished loading. @wesleyhales
readyState • "loading" while the document is loading • "interactive"
once it is finished parsing (but still loading sub-resources) • "complete" once it has loaded. @wesleyhales
Basic loading and blocking Demo @wesleyhales
Enter Navigation Timing API Navigation Timing is a JavaScript API
for accurately measuring performance on the web. @wesleyhales
HRT • The timestamps returned by Performance. now() are up
to microsecond precision. • Example: perf.now.html
@wesleyhales
@wesleyhales
window.performance simple-new.html Demo @wesleyhales
PhantomJS 2 • Released January 2015 • Headless Web browser
• Based on QTWebkit @wesleyhales
PhantomJS 2 Feature Detect @wesleyhales
Basic PhantomJS && http://phantomjs. org/examples/ Demo @wesleyhales
@wesleyhales
Loadreport.js (2012-2015) @wesleyhales
Speedgun.js • Rewrite of loadreport.js • Leverages all implemented PhantomJS
2 Navigation Timing APIs • (shims resource timing) @wesleyhales
Speedgun.js @wesleyhales
Speedgun.js Demo @wesleyhales
Speedgun.io • Allows Speedgun.js to run as a service •
Dockerized • New term… Synthetic RUM @wesleyhales
Speedgun.io Demo @wesleyhales
RUM Real user monitoring (RUM) is a passive monitoring technology
that records all user interaction with a website or client interacting with a server or cloud-based application. @wesleyhales
Synthetic RUM? • Use Speedgun.io as centralized server • All
docker nodes send beacon with: ◦ Current container CPU and memory usage • Yes, another demo... @wesleyhales
Thanks!! • speedgun.io (github) • Navigation Timing API • Navigation
Timing 2 • Resource Timing API