Abusing JavaScript to Measure Web Performance
-
Upload
philip-tellis -
Category
Technology
-
view
2.326 -
download
1
description
Transcript of Abusing JavaScript to Measure Web Performance
• Philip Tellis
• .com• [email protected]
• @bluesmoon• geek paranoid speedfreak• http://bluesmoon.info/
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 1
I <3 JavaScript
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 2
So much that I wore Mustache socks to my wedding
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 3
I’m also a Web Speedfreak
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 4
We measure real user website performance
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 5
This talk is (mostly) about how we abuse JavaScript to do it
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 6
Abusing JavaScript to Measure WebPerformance
Philip Tellis / [email protected]
Boston #WebPerf Meetup / 2012-07-24
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 7
First, a note about the code
Note that in the code that follows,
+ new Date
is equivalent to
new Date().getTime()
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 8
1Latency
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 9
1 Blinking Lights
It takes about 16ms for light to get from SF to Boston(24ms through fibre)
. . .
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 10
1 Blinking Lights
It takes about 16ms for light to get from SF to Boston(24ms through fibre)
Though it takes about 100ms to ping... why?
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 10
1 HTTP
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 11
So to measure latency, we need to send 1 packet each way, andtime it
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 12
1 Network latency in JavaScript
var ts, rtt, img = new Image;img.onload=function() { rtt=(+new Date - ts) };ts = +new Date;img.src="/1x1.gif";
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 13
1 Notes
• 1x1 gif is 35 bytes• including HTTP headers, is smaller than a TCP packet• Fires onload on all browsers• 0 byte image fires onerror• which is indistinguishable from network error
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 14
2TCP handshake
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 15
2 ACK-ACK-ACK
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 16
2 Connection: keep-alive
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 17
2 Network latency & TCP handshake in JavaScript
var t=[], tcp, rtt;var ld = function() {
t.push(+new Date);if(t.length > 2) // run 2 times
done();else {var img = new Image;img.onload = ld;img.src="/1x1.gif?" + Math.random()
+ ’=’ + new Date;}
};var done = function() {
rtt=t[2]-t[1];tcp=t[1]-t[0]-rtt;
};ld();
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 18
Notice that we’ve ignored DNS lookup time here... how wouldyou measure it?
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 19
3Network Throughput
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 20
3 Measuring Network Throughput
data_lengthdownload_time
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 21
Should you fly a 747 or a 737?
• A 747 seats 400+ passengers• A 737 seats about 150• Both take about the same time to fly from SFO to BOS• A 747 takes longer to load and unload
The best selling aircraft to date is the 737
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 22
3 Network Throughput in JavaScript
// Assume global object// image={ url: ..., size: ... }var ts, rtt, bw, img = new Image;img.onload=function() {
rtt=(+new Date - ts);bw = image.size*1000/rtt; // rtt is in ms
};ts = +new Date;img.src=image.url;
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 23
3 Measuring Network Throughput
If it were that simple, I wouldn’t be doing this talk.
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 24
3 TCP Slow Start
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 25
3 Measuring Network Throughput
So to make the best use of bandwidth, we need resources that fitin a TCP window
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 26
3 There is no single size that will tax all available networks
http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 27
3 Network Throughput in JavaScript – Take 2
// image object is now an array of multiple imagesvar i=0;var ld = function() {
if(i>0)image[i-1].end = +new Date;
if(i >= image.length)done();
else {var img = new Image;img.onload = ld;image[i].start = +new Date;img.src=image[i].url;
}i++;
};
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 28
3 Measuring Network Throughput
Slow network connection, meet really huge image
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 29
3 Network Throughput in JavaScript – Take 3
var img = new Image;img.onload = ld;image[i].start = +new Date;image[i].timer =
setTimeout(function() {image[i].expired=true
},image[i].timeout);
img.src=image[i].url;
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 30
3 Network Throughput in JavaScript – Take 3
if(i>0) {image[i-1].end = +new Date;clearTimeout(image[i-1].timer);
}
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 31
3 Network Throughput in JavaScript – Take 3
if(i >= image.length|| (i > 0 && image[i-1].expired)) {
done();}
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 32
3 Measuring Network Throughput
Are we done yet?
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 33
3 Measuring Network Throughput
Are we done yet?sure...
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 33
3 Measuring Network Throughput
Except network throughput is different every time you test it
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 34
Statistics to the Rescue
flickr/sophistechate/4264466015/
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 35
3 Measuring Network Throughput
The code for that is NOT gonna fit on a slide
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 36
But this is sort of what we see world-wide
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 37
And it’s different for different countries
This is India
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 38
4DNS
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 39
4 Measuring DNS
time_with_dns − time_without_dns
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 40
4 Measuring DNS in JavaScript
var t=[], dns, ip, hosts=[’http://hostname.com/’,’http://ip.ad.dr.ess/’];
var ld = function() {t.push(+new Date);if(t.length > hosts.length)done();
else {var img = new Image;img.onload = ld;img.src=hosts[t.length-1] + "/1x1.gif";
}};var done = function() {
ip=t[2]-t[1];dns=t[1]-t[0]-ip;
};ld();
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 41
4 Measuring DNS
• What if the IP changes?• What if DNS is cached?• What if you map DNS based on geo location?
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 42
4 Wildcard DNS Entries
*.foo.com→ IP address
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 43
4 Measuring DNS in JavaScript – take 2
var base_url="http://*.foo.com/",timers = {}, gen_url="";
function start() {var random = Math.random().toString(36),
cache_bust = Math.random(),img = new Image();
gen_url = base_url.replace(/\*/, random);
img.onload = A_loaded;
timers.start = +new Date;img.src = gen_url + "image-l.gif?t=" + cache_bust;
}
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 44
4 Measuring DNS in JavaScript – take 2
function A_loaded() {var cache_bust = Math.random(),
img = new Image();
img.onload = B_loaded;
timers.a_loaded = +new Date;img.src = gen_url + "image-l.gif?t=" + cache_bust;
}
I’ll let you figure out B_loaded
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 45
4 Measuring DNS
Full code in boomerang’s DNS plugin
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 46
5IPv6
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 47
5 Measuring IPv6 support and latency
1 Try to load image from IPv6 host• If timeout or error, then no IPv6 support• If successful, then calculate latency and proceed
2 Try to load image from hostname that resolves only to IPv6host
• If timeout or error, then DNS server doesn’t support IPv6• If successful, calculate latency
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 48
5 Measuring IPv6 support and latency
Full code in boomerang’s IPv6 pluginNote, only run this if you know IPv6 is supported by the client
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 49
6Other Stuff
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 50
6 Other Stuff We Measure
• NavTiming – navtiming.js
• navigation.connection.type – mobile.js
• window.performance.memory – memory.js
• Number of DOM nodes and byte size of HTML –memory.js
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 51
And we try to do it fast
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 52
–.done()
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 53
Code/References
• http://lognormal.github.com/boomerang/doc/(BSD Licensed)
• www.lognormal.com
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 54
• Philip Tellis
• .com• [email protected]
• @bluesmoon• geek paranoid speedfreak• http://bluesmoon.info/
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 55
Thank youAsk me about a discount code
Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 56