This document contains slides from a presentation about using JavaScript to analyze network performance. It discusses how to measure latency, TCP handshake time, network throughput, DNS lookup time, IPv6 support and latency, and private network scanning using JavaScript. Code examples are provided for measuring each of these network metrics by making image requests and timing the responses. The presentation emphasizes that accurately measuring network throughput requires requesting resources of different sizes and accounting for TCP slow start. It also notes some challenges around caching and geo-located DNS results.
Long journey of Ruby standard library at RubyConf AU 2024
Messing with JS & the DOM to analyse the Network performance
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. I <3 JavaScript
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 2
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. I’m also a Web Speedfreak
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 4
5. We measure real user website performance
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 5
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. 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. 1
Latency
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 8
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. 1 HTTP
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 10
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. 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. 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. 2
TCP handshake
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 14
15. 2 ACK-ACK-ACK
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 15
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. 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. 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
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. 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. Low Latency, Low Bandwidth
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 23
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. 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. 3 TCP Slow Start
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 26
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. 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. 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. 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. 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. 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. 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. 3 Measuring Network Throughput
Are we done yet?
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 34
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. 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. Statistics to the Rescue
flickr/sophistechate/4264466015/
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 36
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. 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. 4 DNS
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 39
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. 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. 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. 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. 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. 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. 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. 5 IPv6
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 45
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. 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
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. 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. 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. 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. –
.done()
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 53
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. • 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. Thank you
Web-5 / 2012-04-04 Messing with JS & the DOM to analyse the Network 56