• Philip Tellis•                    .com• philip@lognormal.com• @bluesmoon• geek paranoid speedfreak• http://bluesmoon.inf...
I <3 JavaScriptWeb-5 / 2012-04-04   Messing with JS & the DOM to analyse the Network   2
So much that I wore Mustache socks to my wedding               Web-5 / 2012-04-04   Messing with JS & the DOM to analyse t...
I’m also a Web SpeedfreakWeb-5 / 2012-04-04   Messing with JS & the DOM to analyse the Network   4
We measure real user website performance    Web-5 / 2012-04-04   Messing with JS & the DOM to analyse the Network   5
This talk is (mostly) about how we abuse JavaScript to do it             Web-5 / 2012-04-04   Messing with JS & the DOM to...
Messing with JS & the DOM to analyse the                Network     Philip Tellis / philip@lognormal.com                  ...
1              LatencyWeb-5 / 2012-04-04   Messing with JS & the DOM to analyse the Network   8
1 Blinking Lights        It takes about 18ms for light to get from Béziers to Boston                          (30ms throug...
1 HTTP         Web-5 / 2012-04-04   Messing with JS & the DOM to analyse the Network   10
So to measure latency, we need to send 1 packet each way, and                           time it             Web-5 / 2012-0...
Note about the code                     Note that in the code,                         + new Date                        i...
1   Network latency in JavaScript      var ts, rtt, img = new Image;      img.onload=function() { rtt=(+new Date - ts) }; ...
2   TCP handshakeWeb-5 / 2012-04-04   Messing with JS & the DOM to analyse the Network   14
2 ACK-ACK-ACK           Web-5 / 2012-04-04   Messing with JS & the DOM to analyse the Network   15
2 Connection: keep-alive               Web-5 / 2012-04-04   Messing with JS & the DOM to analyse the Network   16
2   Network latency & TCP handshake in JavaScript    var t=[], tcp, rtt;    var ld = function() {        t.push(+new Date)...
Notice that we’ve ignored DNS lookup time here... how would                      you measure it?             Web-5 / 2012-...
1 Notes    • 1x1 gif is 35 bytes    • including HTTP headers, is smaller than a TCP packet    • Fires onload on all browse...
3Network Throughput Web-5 / 2012-04-04   Messing with JS & the DOM to analyse the Network   20
3 Measuring Network Throughput                            data_length                           download_time             ...
Should you fly a 747 or a 737?       • A 747 seats 400+ passengers       • A 737 seats about 150       • Both take about th...
Low Latency, Low Bandwidth              Web-5 / 2012-04-04   Messing with JS & the DOM to analyse the Network   23
3   Network Throughput in JavaScript    // Assume global object    // image={ url: ..., size: ... }    var ts, rtt, bw, im...
3 Measuring Network Throughput    If it were that simple, I wouldn’t be doing a talk at @web-5                 Web-5 / 201...
3 TCP Slow Start              Web-5 / 2012-04-04   Messing with JS & the DOM to analyse the Network   26
3 Measuring Network Throughput   So to make the best use of bandwidth, we need resources that fit                         i...
3 There is no single size that will tax all available networks   http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidt...
3   Network Throughput in JavaScript – Take 2    // image object is now an array of multiple images    var i=0;    var ld ...
3 Measuring Network Throughput        Slow network connection, meet really huge image               Web-5 / 2012-04-04   M...
3   Network Throughput in JavaScript – Take 3       var img = new Image;       img.onload = ld;       image[i].start = +ne...
3   Network Throughput in JavaScript – Take 3    if(i>0) {       image[i-1].end = +new Date;       clearTimeout(image[i-1]...
3   Network Throughput in JavaScript – Take 3    if(i >= image.length          || (i > 0 && image[i-1].expired)) {       d...
3 Measuring Network Throughput                           Are we done yet?              Web-5 / 2012-04-04   Messing with J...
3 Measuring Network Throughput                           Are we done yet?                               sure...           ...
3 Measuring Network Throughput    Except network throughput is different every time you test it                 Web-5 / 20...
Statistics to the Rescueflickr/sophistechate/4264466015/                                  Web-5 / 2012-04-04   Messing with...
3 Measuring Network Throughput          The code for that is NOT gonna fit on a slide               Web-5 / 2012-04-04   Me...
But this is sort of what we see world-wide                Web-5 / 2012-04-04   Messing with JS & the DOM to analyse the Ne...
4     DNSWeb-5 / 2012-04-04    Messing with JS & the DOM to analyse the Network   39
4 Measuring DNS           time_with_dns − time_without_dns             Web-5 / 2012-04-04   Messing with JS & the DOM to a...
4   Measuring DNS in JavaScript    var t=[], dns, ip, hosts=[’http://hostname.com/’,                               ’http:/...
4 Measuring DNS            What if DNS were already cached?             Web-5 / 2012-04-04   Messing with JS & the DOM to ...
4 Measuring DNS            What if DNS were already cached?              Use a wildcard DNS entry             Web-5 / 2012...
4 Measuring DNS         What if you map DNS based on geo location?              Web-5 / 2012-04-04   Messing with JS & the...
4 Measuring DNS         What if you map DNS based on geo location?           A little more complicated, but doable        ...
4 Measuring DNS           Full code in boomerang’s DNS plugin             Web-5 / 2012-04-04   Messing with JS & the DOM t...
5     IPv6Web-5 / 2012-04-04    Messing with JS & the DOM to analyse the Network   45
5 Measuring IPv6 support and latency    1   Try to load image from IPv6 host          • If timeout or error, then no IPv6 ...
5 Measuring IPv6 support and latency             Full code in boomerang’s IPv6 plugin               Web-5 / 2012-04-04   M...
6Private Network Scanning   Web-5 / 2012-04-04   Messing with JS & the DOM to analyse the Network   48
6 Private Network Scanning      JavaScript in the browser runs with the User’s Security                            Privile...
6 Private Network Scanning         This means you can see the user’s private LAN               Web-5 / 2012-04-04   Messin...
6 Private Network Scanning – Gateways    1   Look at common gateway IPs: 192.168.1.1, 10.0.0.1, etc.    2   When found, lo...
6 Private Network Scanning – Services    1   Scan host range on private network for common ports (80,        22, 3306, etc...
–               .done()Web-5 / 2012-04-04   Messing with JS & the DOM to analyse the Network   53
Code/References    • http://github.com/bluesmoon/boomerang    • http://samy.pl/mapxss/              Web-5 / 2012-04-04   M...
• Philip Tellis•                    .com• philip@lognormal.com• @bluesmoon• geek paranoid speedfreak• http://bluesmoon.inf...
Thank youWeb-5 / 2012-04-04   Messing with JS & the DOM to analyse the Network   56
Upcoming SlideShare
Loading in...5
×

Analysing network characteristics with JavaScript

1,133

Published on

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

No Downloads
Views
Total Views
1,133
On Slideshare
0
From Embeds
0
Number of Embeds
0
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×