Analysing network characteristics with JavaScript

1,308 views
1,233 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,308
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Analysing network characteristics with JavaScript

  1. 1. • Philip Tellis• .com• philip@lognormal.com• @bluesmoon• geek paranoid speedfreak• http://bluesmoon.info/ Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 1
  2. 2. I <3 JavaScriptWeb-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 2
  3. 3. So much that I wore Mustache socks to my wedding Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 3
  4. 4. I’m also a Web SpeedfreakWeb-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 4
  5. 5. We measure real user website performance Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 5
  6. 6. This talk is (mostly) about how we abuse JavaScript to do it Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 6
  7. 7. Messing with JS & the DOM to analyse the Network Philip Tellis / philip@lognormal.com Web-5 / 2012-04-04 Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 7
  8. 8. 1 LatencyWeb-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 8
  9. 9. 1 Blinking Lights It takes about 18ms for light to get from Béziers to Boston (30ms through fibre) Image from http://cablemap.info Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 9
  10. 10. 1 HTTP Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 10
  11. 11. So to measure latency, we need to send 1 packet each way, and time it Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 11
  12. 12. Note about the code Note that in the code, + new Date is equivalent to new Date().getTime() Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 12
  13. 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"; Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 13
  14. 14. 2 TCP handshakeWeb-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 14
  15. 15. 2 ACK-ACK-ACK Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 15
  16. 16. 2 Connection: keep-alive Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 16
  17. 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(); Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 17
  18. 18. Notice that we’ve ignored DNS lookup time here... how would you measure it? Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 18
  19. 19. 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 Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 19
  20. 20. 3Network Throughput Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 20
  21. 21. 3 Measuring Network Throughput data_length download_time Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 21
  22. 22. 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 CDG to MPL • A 747 takes longer to load and unload The best selling aircraft to date is the 737 This analogy would have been much cooler if the Concorde still flew Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 22
  23. 23. Low Latency, Low Bandwidth Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 23
  24. 24. 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; Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 24
  25. 25. 3 Measuring Network Throughput If it were that simple, I wouldn’t be doing a talk at @web-5 Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 25
  26. 26. 3 TCP Slow Start Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 26
  27. 27. 3 Measuring Network Throughput So to make the best use of bandwidth, we need resources that fit in a TCP window Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 27
  28. 28. 3 There is no single size that will tax all available networks http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/ Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 28
  29. 29. 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++; }; Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 29
  30. 30. 3 Measuring Network Throughput Slow network connection, meet really huge image Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 30
  31. 31. 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; Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 31
  32. 32. 3 Network Throughput in JavaScript – Take 3 if(i>0) { image[i-1].end = +new Date; clearTimeout(image[i-1].timer); } Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 32
  33. 33. 3 Network Throughput in JavaScript – Take 3 if(i >= image.length || (i > 0 && image[i-1].expired)) { done(); } Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 33
  34. 34. 3 Measuring Network Throughput Are we done yet? Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 34
  35. 35. 3 Measuring Network Throughput Are we done yet? sure... Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 34
  36. 36. 3 Measuring Network Throughput Except network throughput is different every time you test it Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 35
  37. 37. Statistics to the Rescueflickr/sophistechate/4264466015/ Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 36
  38. 38. 3 Measuring Network Throughput The code for that is NOT gonna fit on a slide Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 37
  39. 39. But this is sort of what we see world-wide Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 38
  40. 40. 4 DNSWeb-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 39
  41. 41. 4 Measuring DNS time_with_dns − time_without_dns Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 40
  42. 42. 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(); Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 41
  43. 43. 4 Measuring DNS What if DNS were already cached? Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 42
  44. 44. 4 Measuring DNS What if DNS were already cached? Use a wildcard DNS entry Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 42
  45. 45. 4 Measuring DNS What if you map DNS based on geo location? Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 43
  46. 46. 4 Measuring DNS What if you map DNS based on geo location? A little more complicated, but doable Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 43
  47. 47. 4 Measuring DNS Full code in boomerang’s DNS plugin Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 44
  48. 48. 5 IPv6Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 45
  49. 49. 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 Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 46
  50. 50. 5 Measuring IPv6 support and latency Full code in boomerang’s IPv6 plugin Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 47
  51. 51. 6Private Network Scanning Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 48
  52. 52. 6 Private Network Scanning JavaScript in the browser runs with the User’s Security Privileges Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 49
  53. 53. 6 Private Network Scanning This means you can see the user’s private LAN Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 50
  54. 54. 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 Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 51
  55. 55. 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 Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 52
  56. 56. – .done()Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 53
  57. 57. Code/References • http://github.com/bluesmoon/boomerang • http://samy.pl/mapxss/ Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 54
  58. 58. • Philip Tellis• .com• philip@lognormal.com• @bluesmoon• geek paranoid speedfreak• http://bluesmoon.info/ Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 55
  59. 59. Thank youWeb-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 56

×