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 JavaScriptNY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 2

So much that I wore Mustache socks to my wedding NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 3

I’m a Speedfreak (the network kind)NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 4

We measure real user website performanceNY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 5

This talk is (mostly) about how we abuse JavaScript to do it NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 6

Abusing JavaScript to Measure Web Performance Philip Tellis / philip@lognormal.com NY #WebPerf Meetup / 2012-09-13NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 7

First, a note about the code Note that in the code that follows, + new Date is equivalent to new Date().getTime() NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 8

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

Arrange the following in order of increasing signal latency overa ﬁxed distance: • Electricity through copper • Smoke Signals • Light through Fibre • Pulsar NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 10

1 Blinking Lights It takes about 16ms for light to get from SF to NYC (24ms through ﬁbre) ... NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 11

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? NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 11

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

So to measure latency, we need to send 1 packet each way, and time it NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 13

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"; NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 14

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 NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 15

2 TCP handshakeNY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 16

2 ACK-ACK-ACK NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 17

2 Connection: keep-alive NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 18

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(); NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 19

Notice that we’ve ignored DNS lookup time here... how would you measure it? NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 20

Network Throughput 3NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 21

3 Measuring Network Throughput data_length download_time NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 22

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 NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 23

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; NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 24

3 Measuring Network Throughput If it were that simple, I wouldn’t be doing this talk. NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 25

3 TCP Slow Start NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 26

3 Measuring Network Throughput So to make the best use of bandwidth, we need resources that ﬁt in a TCP window NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 27

3 There is no single size that will tax all available networks http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/ NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 28

3 Network Throughput in JavaScript – Take 2 // image object is now an array of multiple images var 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++; }; NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 29

3 Measuring Network Throughput Slow network connection, meet really huge image NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 30

3 Network Throughput in JavaScript – Take 3 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; NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 31

3 Network Throughput in JavaScript – Take 3 if(i>0) { image[i-1].end = +new Date; clearTimeout(image[i-1].timer); } NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 32

3 Network Throughput in JavaScript – Take 3 if(i >= image.length || (i > 0 && image[i-1].expired)) { done(); } NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 33

3 Measuring Network Throughput Are we done yet? NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 34

3 Measuring Network Throughput Are we done yet? sure... NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 34

3 Measuring Network Throughput Except network throughput is different every time you test it NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 35

Statistics to the Rescueﬂickr/sophistechate/4264466015/ NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 36

3 Measuring Network Throughput The code for that is NOT gonna ﬁt on a slide NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 37

But this is sort of what we see world-wide NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 38

And it’s different for different countries This is India NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 39

4 DNSNY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 40

4 Measuring DNS time_with_dns − time_without_dns NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 41

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(); NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 42

4 Measuring DNS • What if the IP changes? • What if DNS is cached? • What if you map DNS based on geo location? NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 43

4 Wildcard DNS Entries *.foo.com → IP address NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 44

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; } NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 45

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 NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 46

4 Measuring DNS Full code in boomerang’s DNS plugin NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 47

5 IPv6NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 48

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 NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 49

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 NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 50

6 Other StuffNY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 51

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 NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 52

And we try to do it fastNY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 53

– .done()NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 54

Code/References • http://lognormal.github.com/boomerang/doc/ (BSD Licensed) • www.lognormal.com NY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 55

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

Thank you Ask me about a discount codeNY #WebPerf Meetup / 2012-09-13 Abusing JavaScript to Measure Web Performance 57

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

by Philip Tellis on Sep 13, 2012

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

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