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 WebPerformance

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

1Latency

1 Blinking Lights

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

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?

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

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

• 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

abusing javascript

webperf meetup

web performance

ld boston

measuring network throughputif

worldwide boston

new imageimg

network throughput3boston

Technology

working with substance abusing families

abusing & exploiting with firefox add-ons1

abusing marital relation20.09.11

abusing rfid for fun & profit. -...

abusing calypso phones

abusing mach on mac os x

abusing symlinks on windows

abusing firefox extensions

abusing jsonp with - owasp · abusing jsonp with michele...

abusing com & dcom objects

abusing target

abusing open http proxies

abusing prescription drugs

jsmeter: characterizing the behavior of javascript web...

abusing belkin home automation devices

abusing twitter api oauth 2013

taesoo kim abusing performance optimization weaknesses...

abusing adobe reader’s javascript apis - def con con...

techtalk abusing the hypervisor

abusing twitter api & oauth implementation -...