This repository has been archived by the owner on Apr 15, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 447
/
howto-9.html
92 lines (81 loc) · 4.54 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
<!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>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>Firefox 7+ (<strong>note</strong> that a bug in Firefox 7 and 8 reports the incorrect time for navigationStart. Use unloadEventStart or fetchStart for a close proximation.)</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_st</code></td><td><code>window.performance.timing.domContentLoadedStart</code></td></tr>
<tr><td><code>nt_domcontloaded_end</code></td><td><code>window.performance.timing.domContentLoadedEnd</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>