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 JavaScriptBoston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 2

So much that I wore Mustache socks to my wedding Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 3

I’m also a Web SpeedfreakBoston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 4

We measure real user website performanceBoston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 5

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

Abusing JavaScript to Measure Web Performance Philip Tellis / philip@lognormal.com Boston #WebPerf Meetup / 2012-07-24Boston #WebPerf Meetup / 2012-07-24 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() Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 8

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

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

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? Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 10

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

So to measure latency, we need to send 1 packet each way, and time it Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 12

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

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 Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 14

2 TCP handshakeBoston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 15

2 ACK-ACK-ACK Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 16

2 Connection: keep-alive Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 17

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(); Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 18

Notice that we’ve ignored DNS lookup time here... how would you measure it? Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 19

Network Throughput 3Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 20

3 Measuring Network Throughput data_length download_time Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 21

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 Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 22

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; Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 23

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

3 TCP Slow Start Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 25

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

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

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++; }; Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 28

3 Measuring Network Throughput Slow network connection, meet really huge image Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 29

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; Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 30

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

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

3 Measuring Network Throughput Are we done yet? Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 33

3 Measuring Network Throughput Are we done yet? sure... Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 33

3 Measuring Network Throughput Except network throughput is different every time you test it Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 34

Statistics to the Rescueﬂickr/sophistechate/4264466015/ Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 35

3 Measuring Network Throughput The code for that is NOT gonna ﬁt on a slide Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 36

But this is sort of what we see world-wide Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 37

And it’s different for different countries This is India Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 38

4 DNSBoston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 39

4 Measuring DNS time_with_dns − time_without_dns Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 40

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(); Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 41

4 Measuring DNS • What if the IP changes? • What if DNS is cached? • What if you map DNS based on geo location? Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 42

4 Wildcard DNS Entries *.foo.com → IP address Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 43

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; } Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 44

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 Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 45

4 Measuring DNS Full code in boomerang’s DNS plugin Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 46

5 IPv6Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 47

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 Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 48

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 Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 49

6 Other StuffBoston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 50

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 Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 51

And we try to do it fastBoston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 52

– .done()Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 53

Code/References • http://lognormal.github.com/boomerang/doc/ (BSD Licensed) • www.lognormal.com Boston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 54

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

Thank you Ask me about a discount codeBoston #WebPerf Meetup / 2012-07-24 Abusing JavaScript to Measure Web Performance 56

Abusing JavaScript to Measure Web Performance

by Philip Tellis on Jul 25, 2012

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 22

Statistics

Abusing JavaScript to Measure Web Performance Presentation Transcript