forked from YahooArchive/boomerang
/
howto-9.html
94 lines (83 loc) · 4.45 KB
/
howto-9.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE HTML>
<html>
<head>
<title>Boomerang Howto #9: Collect performance data from the W3C Navigation Timing API</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../boomerang-docs.css">
</head>
<body>
<span style="float:right;"><a href="../">All Docs</a> | <a href="index.html">Index</a></span>
<h1>Boomerang Howto #9: Collect performance data from the Navigation Timing API</h1>
<p>
<strong>Note:</strong> The Navigation Timing plugin hasn't been tested. Your help in testing it is appreciated.
</p>
<p>The W3C Navigation Timing API is an interface implemented by modern browsers that
provides broad and deep data related to the performance of page loads. At the time
of this writing, it is supported by the following browsers:</p>
<ul>
<li>Chrome 6+</li>
<li>Internet Explorer 9+</li>
<li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=570341">Coming soon to Firefox</a></li>
</ul>
<p>The navtiming.js plugin doesn't require any configuration options as it simply
reads data out of the browser (if available) and adds it to the beacon query
string.</p>
<p>You will have to build your own version of boomerang.js since it
isn't one of the default plugins. To do this, run <code>make</code> in the
boomerang directory with the following option:</p>
<pre>
make PLUGINS=navtiming.js
</pre>
<p>Then you can include the new boomerang file (don't forget to run it through
your favorite Javascript minifier first) as you normally would.</p>
<p>The new query parameters and the browser attributes they map
to are shown below. More information about the definition of each attribute can be found
in the <a href="http://www.w3.org/TR/navigation-timing/">W3C Navigation Timing specification</a>.</p>
<table>
<tr>
<th>Boomerang beacon parameter</th>
<th>Navigation Timing attribute</th>
</tr>
<tr><td><code>nt_red_cnt</code></td><td><code>window.performance.navigation.redirectCount</code></td></tr>
<tr><td><code>nt_nav_type</code></td><td><code>window.performance.navigation.type</code></td></tr>
<tr><td><code>nt_nav_st</code></td><td><code>window.performance.timing.navigationStart</code></td></tr>
<tr><td><code>nt_red_st</code></td><td><code>window.performance.timing.redirectStart</code></td></tr>
<tr><td><code>nt_red_end</code></td><td><code>window.performance.timing.redirectEnd</code></td></tr>
<tr><td><code>nt_fet_st</code></td><td><code>window.performance.timing.fetchStart</code></td></tr>
<tr><td><code>nt_dns_st</code></td><td><code>window.performance.timing.domainLookupStart</code></td></tr>
<tr><td><code>nt_dns_end</code></td><td><code>window.performance.timing.domainLookupEnd</code></td></tr>
<tr><td><code>nt_con_st</code></td><td><code>window.performance.timing.connectStart</code></td></tr>
<tr><td><code>nt_con_end</code></td><td><code>window.performance.timing.connectEnd</code></td></tr>
<tr><td><code>nt_req_st</code></td><td><code>window.performance.timing.requestStart</code></td></tr>
<tr><td><code>nt_res_st</code></td><td><code>window.performance.timing.responseStart</code></td></tr>
<tr><td><code>nt_res_end</code></td><td><code>window.performance.timing.responseEnd</code></td></tr>
<tr><td><code>nt_domloading</code></td><td><code>window.performance.timing.domLoading</code></td></tr>
<tr><td><code>nt_domint</code></td><td><code>window.performance.timing.domInteractive</code></td></tr>
<tr><td><code>nt_domcontloaded</code></td><td><code>window.performance.timing.domContentLoaded</code></td></tr>
<tr><td><code>nt_domcomp</code></td><td><code>window.performance.timing.domComplete</code></td></tr>
<tr><td><code>nt_load_st</code></td><td><code>window.performance.timing.loadEventStart</code></td></tr>
<tr><td><code>nt_load_end</code></td><td><code>window.performance.timing.loadEventEnd</code></td></tr>
<tr><td><code>nt_unload_st</code></td><td><code>window.performance.timing.unloadEventStart</code></td></tr>
<tr><td><code>nt_unload_end</code></td><td><code>window.performance.timing.unloadEventEnd</code></td></tr>
</table>
<p class="perma-link">
The latest code and docs is available on <a href="http://github.com/lognormal/boomerang/">github.com/lognormal/boomerang</a>
</p>
<p id="results">
</p>
<script src="../../boomerang.js" type="text/javascript"></script>
<script src="howtos.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.init({
user_ip: '10.0.0.1',
BW: {
base_url: '../../images/',
cookie: 'HOWTO-BA'
},
RT: {
cookie: 'HOWTO-RT'
}
});
</script>
</body>
</html>