• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Messing with JavaScript and the DOM to measure network characteristics
 

Messing with JavaScript and the DOM to measure network characteristics

on

  • 5,460 views

My talk from JSConf.eu: http://jsconf.eu/2011/messing_with_javascript_and_th.html

My talk from JSConf.eu: http://jsconf.eu/2011/messing_with_javascript_and_th.html

Statistics

Views

Total Views
5,460
Views on SlideShare
5,330
Embed Views
130

Actions

Likes
13
Downloads
32
Comments
0

9 Embeds 130

http://paper.li 44
http://a0.twimg.com 32
http://a0.twimg.com 32
http://us-w1.rockmelt.com 10
http://tweetedtimes.com 6
http://strawberryj.am 2
http://strawberryj.am 2
http://www.scoop.it 1
https://twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Messing with JavaScript and the DOM to measure network characteristics Messing with JavaScript and the DOM to measure network characteristics Presentation Transcript

    • Messing with JS & the DOM to analyse the Network Philip Tellis / philip@bluesmoon.info JSConf.eu / 2011-10-01 JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 1
    • HTTP/TCP/IP Developed by three guys with one beard between them JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 2
    • JavaScript: The good parts Discovered by one guy with one beard on him JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 3
    • Let’s play with the nasty parts JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 4
    • 1 LatencyJSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 5
    • 1 Blinkenlichten It takes about 23ms for light to get from Berlin to NY (35ms through fibre) Image from http://cablemap.info JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 6
    • 1 HTTP JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 7
    • So to measure latency, we need to send 1 packet each way, and time it JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 8
    • 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"; JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 9
    • TCP handshake 2JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 10
    • 2 ACK-ACK-ACK JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 11
    • 2 Connection: keep-alive JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 12
    • 2 Network latency & TCP handshake in JavaScript var t=[], n=2, tcp, rtt; var ld = function() { t.push(+new Date); if(t.length > n) 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(); JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 13
    • The astute reader will notice that we’ve ignored DNS lookup time here... how would you measure it? JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 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 fires onerror • which is indistinguishable from network error JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 15
    • Network Throughput 3JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 16
    • 3 Measuring Network Throughput size download_time JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 17
    • 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; JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 18
    • 3 Measuring Network Throughput If it were that simple, I wouldn’t be doing a talk at @jsconfeu JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 19
    • 3 TCP Slow Start JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 20
    • 3 Measuring Network Throughput So to make the best use of bandwidth, we need resources that fit in a TCP window JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 21
    • 3 There is no single size that will tax all available networks http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/ JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 22
    • 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++; }; JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 23
    • 3 Measuring Network Throughput Slow network connection, meet really huge image JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 24
    • 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; JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 25
    • 3 Network Throughput in JavaScript – Take 3 if(i>0) { image[i-1].end = +new Date; clearTimeout(image[i-1].timer); } JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 26
    • 3 Network Throughput in JavaScript – Take 3 if(i >= image.length || (i > 0 && image[i-1].expired)) { done(); } JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 27
    • 3 Measuring Network Throughput Are we done yet? JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 28
    • 3 Measuring Network Throughput Are we done yet? sure... JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 28
    • 3 Measuring Network Throughput Except network throughput is different every time you test it JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 29
    • Statistics to the Rescueflickr/sophistechate/4264466015/ JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 30
    • 3 Measuring Network Throughput The code for that is NOT gonna fit on a slide JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 31
    • 4 DNSJSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 32
    • 4 Measuring DNS time_with_dns − time_without_dns JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 33
    • 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(); JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 34
    • 4 Measuring DNS What if DNS were already cached? JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 35
    • 4 Measuring DNS What if DNS were already cached? Use a wildcard DNS entry JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 35
    • 4 Measuring DNS What if you map DNS based on geo location? JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 36
    • 4 Measuring DNS What if you map DNS based on geo location? A little more complicated, but doable JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 36
    • 4 Measuring DNS Full code in boomerang’s DNS plugin JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 37
    • 5 IPv6JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 38
    • 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 JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 39
    • 5 Measuring IPv6 support and latency Full code in boomerang’s IPv6 plugin JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 40
    • 6Private Network Scanning JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 41
    • 6 Private Network Scanning JavaScript in the browser runs with the User’s Security Privileges JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 42
    • 6 Private Network Scanning This means you can see the user’s private LAN JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 43
    • 6 Private Network Scanning – Gateways 1 Look at common gateway IPs: 192.168.1.1, 10.0.0.1, etc. 2 When found, look for common image URLs assuming various routers/DSL modems 3 When found, try to log in with default username/password if you’re lucky, the user is already logged in JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 44
    • 6 Private Network Scanning – Services 1 Scan host range on private network for common ports (80, 22, 3306, etc.) 2 Measure how long it takes to onerror • Short timeout: connection refused • Long timeout: something listening, but it isn’t HTTP • Longer timeout: probably HTTP, but not an image 3 Try an iframe instead of an image JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 45
    • – .done()JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 46
    • Code/References • http://github.com/bluesmoon/boomerang • http://samy.pl/mapxss/ JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 47
    • • Philip Tellis• LogNormal.com• philip@bluesmoon.info• @bluesmoon• geek paranoid speedfreak• http://bluesmoon.info/ JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 48
    • Thank youJSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 49