forked from YahooArchive/boomerang
/
howto-2.html
99 lines (85 loc) · 3.81 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
<!DOCTYPE HTML>
<html>
<head>
<title>Boomerang 使用方法 #2: 動的な読み込みのパフォーマンスを認識して測定する</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="../">ドキュメント一覧</a> | <a href="index.html">使用方法一覧</a></span>
<h1>Boomerang 使用方法 #2:<br>動的な読み込みのパフォーマンスを認識して測定する</h1>
<p>
この要件の説明は <a href="../use-cases.html#uc-2">ユースケース #2</a> をご覧ください。
</p>
<p>
このドキュメントは XHR を使っていくつかのコンテンツの読み込みを試し、boomerang を使ってそのコンテンツの読み込みかかった時間を測定します。次のようにして行ないます:
</p>
<ol>
<li>あなたのドキュメントルートに boomerang.js と images/ ディレクトリーをコピーします</li>
<li>次のコードをあなたのページの XHR を呼び出す前のどこかに追加します</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>
次にあなたのコンテンツを取得します。コンテンツの取得を呼び出す直前にタイマーが開始します。読み込み時間のタイマーは <code>t_done</code> と呼ばれます。コンテンツの取得が終わったときのコールバック関数の中で <code>done()</code> メソッドが呼び出されます。この測定とビーコンがレスポンスタイムを返します。以下は YUI 3 を使ったコードですが、あなたの好きな書き方をしてもいいです。
</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">
最新のソースコードとドキュメントは <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/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.
-->