Analysing network characteristics with JavaScript
Post on 18-May-2015
1103 Views
Preview:
Transcript
• 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
I <3 JavaScript
Web-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 the Network 3
I’m also a Web Speedfreak
Web-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 analyse the Network 6
Messing with JS & the DOM to analyse theNetwork
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
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
So to measure latency, we need to send 1 packet each way, andtime it
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 11
Note about the code
Note that in the code,+ new Date
is equivalent tonew Date().getTime()
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 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";
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 13
2TCP handshake
Web-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);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
Notice that we’ve ignored DNS lookup time here... how wouldyou measure it?
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 18
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
3Network Throughput
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 20
3 Measuring Network Throughput
data_lengthdownload_time
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 21
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
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, 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
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
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 fitin a TCP window
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 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/
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 28
3 Network Throughput in JavaScript – Take 2
// image object is now an array of multiple imagesvar 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
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
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
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
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
3 Measuring Network Throughput
Are we done yet?
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 34
3 Measuring Network Throughput
Are we done yet?sure...
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 34
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
Statistics to the Rescue
flickr/sophistechate/4264466015/
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 36
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
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
4 Measuring DNS
time_with_dns − time_without_dns
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 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();
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 41
4 Measuring DNS
What if DNS were already cached?
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 42
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
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
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
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
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 IPv6host
• 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
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
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 SecurityPrivileges
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 49
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
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 modems3 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
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
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
• 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
top related