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-2.html
103 lines (89 loc) · 3.33 KB
/
howto-2.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
95
96
97
98
99
100
101
102
103
<!DOCTYPE HTML>
<html>
<head>
<title>Boomerang Howto #2: Measure perceived performance of content loaded dynamically</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 #2:<br>Measure perceived performance of content loaded dynamically</h1>
<p>
See <a href="../use-cases.html#uc-2">use case #2</a> for a description of this requirement.
</p>
<p>
This document attempts to load some content using XHR and measures the time it took to load that
content using boomerang. This is how you do it:
</p>
<ol>
<li>Copy boomerang.js and the images/ directory into your document root</li>
<li>Add the code below to your page, somewhere before your XHR calls.</li>
</ol>
<pre>
<script src="boomerang.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.init({
user_ip: "<user's ip address>",
beacon_url: "http://yoursite.com/path/to/beacon.php",
auto_run: false
});
</script>
</pre>
<p>
Next fetch your content. Right before the call to fetch content, start the timer. The load time timer is called
<code>t_done</code>. In the callback function where the content has been fetched, call the <code>done()</code>
method. This measures and beacons back the response time. I use YUI 3 in the code below, but you could use
anything you like.
</p>
<pre>
YUI().use("io-base", function(Y) {
var uri = "dynamic-content.txt";
function complete(id, o) {
var html = o.responseText;
document.getElementById("dynamic-content").innerHTML = html;
<em>BOOMR.plugins.RT.done(); // Tell boomerang to measure time and fire a beacon</em>
};
Y.on('io:complete', complete);
<em>BOOMR.plugins.RT.startTimer("t_done"); // Start measuring download time</em>
var request = Y.io(uri);
});
</pre>
<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>
<div id="dynamic-content">
</div>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-base-min.js&3.1.1/build/oop/oop-min.js&3.1.1/build/yui/yui-later-min.js&3.1.1/build/event-custom/event-custom-base-min.js&3.1.1/build/querystring/querystring-stringify-simple-min.js&3.1.1/build/io/io-base-min.js"></script>
<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'
}
});
YUI().use("io-base", function(Y) {
var uri = "dynamic-content.txt?" + new Date().getTime();
function complete(id, o) {
var html = "<p>\n" + o.responseText.replace(/^$/mg, '</p>\n<p>') + "\n</p>";
document.getElementById("dynamic-content").innerHTML = html;
BOOMR.plugins.RT.done();
};
Y.on('io:complete', complete);
BOOMR.plugins.RT.startTimer("t_done");
var request = Y.io(uri);
});
</script>
</body>
</html>
<!--
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Copyrights licensed under the BSD License. See the accompanying LICENSE.txt file for terms.
-->