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 WebPerformance

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

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/

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;

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/

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

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

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

• Philip Tellis

• .com• philip@lognormal.com

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

Thank youAsk me about a discount code

abusing javascript to measure web performance, or, "how does boomerang work?"

abusing javascript

webperf meetup

web performance

dns ny

worldwide ny

new imageimg

network throughput3ny

new image img

Technology

abusing firefox extensions

abusing microsoft kerberos: sorry you guys ... - gentil...

boomerang guion

abusing duqu, flame, miniflame

boomerang ranch

puckapunyal boomerang - puckacommunity.org.au€¦ ·...

taesoo kim abusing performance optimization weaknesses to...

abusing seh for fun

abusing java remote interfaces

boomerang offsite

abusing target

child abusing

techtalk abusing the hypervisor

kindness boomerang

boomerang media

abusing javascript to measure web performance

abusing com & dcom objects

blackhat seo: abusing google trends to seo: abusing google

abusing marital relation20.09.11

owasp abusing php sockets