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

• Philip Tellis

• .com• [email protected]

• @bluesmoon• geek paranoid speedfreak• http://bluesmoon.info/

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

http://www.lognormal.com/

http://twitter.com/bluesmoon

http://bluesmoon.info/

http://www.nywebperformance.org/events/78566362/

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 WebPerformance

Philip Tellis / [email protected]

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



1Latency



Arrange the following in order of increasing signal latency overa fixed 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 fibre)

. . .



1 Blinking Lights

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

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



1 HTTP



So to measure latency, we need to send 1 packet each way, andtime 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 fires onerror• which is indistinguishable from network error



2TCP 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 wouldyou measure it?



3Network Throughput



3 Measuring Network Throughput

data_lengthdownload_time



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 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 fitin 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/


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

};




Slow network connection, meet really huge image




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;




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

flickr/sophistechate/4264466015/


http://www.flickr.com/photos/sophistechate/4264466015/



The code for that is NOT gonna fit on a slide



But this is sort of what we see world-wide



And it’s different for different countries

This is India



4DNS



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/’];

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



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 figure out B_loaded



4 Measuring DNS

Full code in boomerang’s DNS plugin



5IPv6



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



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



6Other 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


http://www.lognormal.com


• Philip Tellis

• .com• [email protected]

• @bluesmoon• geek paranoid speedfreak• http://bluesmoon.info/


http://www.lognormal.com/

http://twitter.com/bluesmoon

http://bluesmoon.info/


Thank youAsk me about a discount code



Date post:	18-May-2015
Category:	Technology
Upload:	philip-tellis
View:	1,428 times
Download:	1 times

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

Technology