What is JavaScript? Embedding JavaScript with HTML JavaScript conventions Variables in JavaScript
Analysing network characteristics with JavaScript
-
Upload
philip-tellis -
Category
Technology
-
view
1.105 -
download
3
Transcript of Analysing network characteristics with JavaScript
![Page 1: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/1.jpg)
• Philip Tellis
• .com• [email protected]
• @bluesmoon• geek paranoid speedfreak• http://bluesmoon.info/
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 1
![Page 2: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/2.jpg)
I <3 JavaScript
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 2
![Page 3: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/3.jpg)
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
![Page 4: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/4.jpg)
I’m also a Web Speedfreak
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 4
![Page 5: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/5.jpg)
We measure real user website performance
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 5
![Page 6: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/6.jpg)
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
![Page 7: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/7.jpg)
Messing with JS & the DOM to analyse theNetwork
Philip Tellis / [email protected]
Web-5 / 2012-04-04
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 7
![Page 9: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/9.jpg)
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
![Page 11: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/11.jpg)
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
![Page 12: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/12.jpg)
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
![Page 13: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/13.jpg)
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
![Page 14: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/14.jpg)
2TCP handshake
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 14
![Page 15: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/15.jpg)
2 ACK-ACK-ACK
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 15
![Page 16: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/16.jpg)
2 Connection: keep-alive
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 16
![Page 17: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/17.jpg)
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
![Page 18: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/18.jpg)
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
![Page 19: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/19.jpg)
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
![Page 20: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/20.jpg)
3Network Throughput
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 20
![Page 21: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/21.jpg)
3 Measuring Network Throughput
data_lengthdownload_time
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 21
![Page 22: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/22.jpg)
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
![Page 23: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/23.jpg)
Low Latency, Low Bandwidth
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 23
![Page 24: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/24.jpg)
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
![Page 25: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/25.jpg)
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
![Page 26: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/26.jpg)
3 TCP Slow Start
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 26
![Page 27: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/27.jpg)
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
![Page 28: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/28.jpg)
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
![Page 29: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/29.jpg)
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
![Page 30: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/30.jpg)
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
![Page 31: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/31.jpg)
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
![Page 32: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/32.jpg)
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
![Page 33: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/33.jpg)
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
![Page 34: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/34.jpg)
3 Measuring Network Throughput
Are we done yet?
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 34
![Page 35: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/35.jpg)
3 Measuring Network Throughput
Are we done yet?sure...
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 34
![Page 36: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/36.jpg)
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
![Page 37: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/37.jpg)
Statistics to the Rescue
flickr/sophistechate/4264466015/
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 36
![Page 38: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/38.jpg)
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
![Page 39: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/39.jpg)
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
![Page 41: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/41.jpg)
4 Measuring DNS
time_with_dns − time_without_dns
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 40
![Page 42: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/42.jpg)
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
![Page 43: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/43.jpg)
4 Measuring DNS
What if DNS were already cached?
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 42
![Page 44: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/44.jpg)
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
![Page 45: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/45.jpg)
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
![Page 46: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/46.jpg)
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
![Page 47: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/47.jpg)
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
![Page 49: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/49.jpg)
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
![Page 50: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/50.jpg)
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
![Page 51: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/51.jpg)
6Private Network Scanning
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 48
![Page 52: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/52.jpg)
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
![Page 53: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/53.jpg)
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
![Page 54: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/54.jpg)
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
![Page 55: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/55.jpg)
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
![Page 57: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/57.jpg)
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
![Page 58: Analysing network characteristics with JavaScript](https://reader034.fdocuments.in/reader034/viewer/2022052523/5559ac30d8b42aa4288b5083/html5/thumbnails/58.jpg)
• Philip Tellis
• .com• [email protected]
• @bluesmoon• geek paranoid speedfreak• http://bluesmoon.info/
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 55