Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"

• Philip Tellis

• .com
• philip@lognormal.com
• @bluesmoon
• geek paranoid speedfreak
• http://bluesmoon.info/

NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 1

I <3 JavaScript


So much that I wore Mustache socks to my wedding


I’m a Speedfreak (the network kind)


We measure real user website performance


This talk is (mostly) about how we abuse JavaScript to do it


Abusing JavaScript to Measure Web
Performance

Philip Tellis / philip@lognormal.com

NY #WebPerf Meetup / 2012-09-13


First, a note about the code

Note that in the code that follows,

+ new Date

is equivalent to

new Date().getTime()


1
Latency


Arrange the following in order of increasing signal latency over
a ﬁxed distance:
• Electricity through copper
• Smoke Signals
• Light through Fibre
• Pulsar


1 Blinking Lights

It takes about 16ms for light to get from SF to NYC
(24ms through ﬁbre)

...


1 Blinking Lights

It takes about 16ms for light to get from SF to NYC
(24ms through ﬁbre)

Though it takes about 100ms to ping... why?


1 HTTP


So to measure latency, we need to send 1 packet each way, and
time it


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";


1 Notes

• 1x1 gif is 35 bytes
• including HTTP headers, is smaller than a TCP packet
• Fires onload on all browsers
• 0 byte image ﬁres onerror
• which is indistinguishable from network error


2
TCP handshake


2 ACK-ACK-ACK


2 Connection: keep-alive


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();

Notice that we’ve ignored DNS lookup time here... how would
you measure it?


Network Throughput
3

3 Measuring Network Throughput

data_length
download_time


Should you ﬂy a 747 or a 737?

• A 747 seats 400+ passengers
• A 737 seats about 150
• Both take about the same time to ﬂy from SFO to BOS
• A 747 takes longer to load and unload than 3 737s in
parallel

The best selling aircraft to date is the 737


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;



If it were that simple, I wouldn’t be doing this talk.


3 TCP Slow Start



So to make the best use of bandwidth, we need resources that ﬁt
in a TCP window


3 There is no single size that will tax all available networks

http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/


3 Network Throughput in JavaScript – Take 2

// image object is now an array of multiple images
var i=0;
if(i>0)
image[i-1].end = +new Date;
if(i >= image.length)
done();
else {
img.onload = ld;
image[i].start = +new Date;
img.src=image[i].url;
}
i++;
};



Slow network connection, meet really huge 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;



if(i>0) {
image[i-1].end = +new Date;
clearTimeout(image[i-1].timer);
}



if(i >= image.length
|| (i > 0 && image[i-1].expired)) {
done();
}



Are we done yet?



Are we done yet?
sure...



Except network throughput is different every time you test it


Statistics to the Rescue

ﬂickr/sophistechate/4264466015/


The code for that is NOT gonna ﬁt on a slide


But this is sort of what we see world-wide


And it’s different for different countries

This is India


4 DNS


4 Measuring DNS

time_with_dns − time_without_dns


4 Measuring DNS in JavaScript
var t=[], dns, ip, hosts=[’http://hostname.com/’,
’http://ip.ad.dr.ess/’];
t.push(+new Date);
if(t.length > hosts.length)
done();
else {
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();

4 Measuring DNS

• What if the IP changes?
• What if DNS is cached?
• What if you map DNS based on geo location?


4 Wildcard DNS Entries

*.foo.com → IP address


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;
}


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 ﬁgure out B_loaded


4 Measuring DNS

Full code in boomerang’s DNS plugin


5 IPv6


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 IPv6
host
• If timeout or error, then DNS server doesn’t support IPv6
• If successful, calculate latency


5 Measuring IPv6 support and latency

Full code in boomerang’s IPv6 plugin
Note, only run this if you know IPv6 is supported by the client


6
Other Stuff


6 Other Stuff We Measure

• NavTiming – navtiming.js
• navigation.connection.type – mobile.js
• window.performance.memory – memory.js –
Chrome 22 reporting now.
• Number of DOM nodes and byte size of HTML –
memory.js


And we try to do it fast


–
.done()


Code/References

• http://lognormal.github.com/boomerang/doc/
(BSD Licensed)
• www.lognormal.com


• Philip Tellis

• .com
• philip@lognormal.com
• @bluesmoon
• geek paranoid speedfreak
• http://bluesmoon.info/


Thank you
Ask me about a discount code


Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"

More Related Content

Similar to Abusing JavaScript to measure Web Performance, or, "how does boomerang work?" (20)

More from Philip Tellis (20)

Recently uploaded (20)

Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"