Abusing JavaScript to Measure Web Performance

• Philip Tellis

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

Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 1

I <3 JavaScript


So much that I wore Mustache socks to my wedding


I’m also a Web Speedfreak


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

Boston #WebPerf Meetup / 2012-07-24


First, a note about the code

Note that in the code that follows,

+ new Date

is equivalent to

new Date().getTime()


1
Latency


1 Blinking Lights

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

...


1 Blinking Lights

It takes about 16ms for light to get from SF to Boston
(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

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
• 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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (9)

Semelhante a Abusing JavaScript to Measure Web Performance

Semelhante a Abusing JavaScript to Measure Web Performance (20)

Mais de Philip Tellis

Mais de Philip Tellis (20)

Último

Último (20)

Abusing JavaScript to Measure Web Performance