forked from YahooArchive/boomerang
/
howto-10-page#1.html
66 lines (62 loc) · 3.1 KB
/
howto-10-page#1.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
<!DOCTYPE HTML>
<html>
<head>
<title>Boomerang 使用方法 #10: Google Chrome による prerendered されたページの読み込み時間</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../boomerang-docs.css">
<link rel="prerender" href="howto-10-page%232.html">
</head>
<body>
<span style="float:right;"><a href="../">ドキュメント一覧</a> | <a href="index.html">使用方法一覧</a></span>
<h1>Boomerang 使用方法 #10:<br>Google Chrome による prerendered されたページの読み込み時間</h1>
<p>
このユースケースは Google Chrome 13 に実装された <a href="http://code.google.com/chrome/whitepapers/prerender.html">prerender</a> 機能をベースにしています。
ページに読み込むコードはあなたが prerender を利用するかどうかに関わらず同じになります。この使用方法はそれらを配慮していません。
しかしながら、特定のページの prerender を有効にするには、元のドキュメントにあるリンク要素としてそのページの URL を含めます。
例えば、元のページの HEAD の中にこのようなコードを埋め込みます:
</p>
<pre>
<link rel="prerender" href="howto-10-page%232.html">
</pre>
<p>
これは <code>howto-10-page#2.html</code> と全てのそのリソースを先読みすることを Chrome に明示して、ユーザーが見えないバックグランドでレンダリングを開始します。
ユーザーがドキュメントのリンクをクリックすると、すぐに表示されます。
</p>
<p>
パフォーマンスを気にするエンジニアなら、その全体でどれくらい時間を要したか知りたくなると思います。個別には次のような点が気になると思います:
</p>
<ol>
<li>クリックしてから表示されるまでの時間</li>
<li>fetchStart/navigationStart から prerender が終わるまでの時間</li>
<li>fetchStart/navigationStart から表示されるまでの時間</li>
<li>prerender が終わってから表示されるまでの時間</li>
</ol>
<p>
それでは、あなたが2番目のページのレンダリングを完了するために、このページを十分時間をかけて読んだことに期待しましょう。
</p>
<p>
ページの読み込みテスト結果を確認するために <a href="howto-10-page%232.html">2番目のページ</a> に移動してください。
</p>
<p class="perma-link">
最新のソースコードとドキュメントは <a href="http://github.com/yahoo/boomerang/">github.com/yahoo/boomerang</a> に公開されています。
</p>
<p id="results">
</p>
<script src="../../../boomerang.js" type="text/javascript"></script>
<script src="../../howtos/howtos.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.init({
BW: {
enabled: false
},
RT: {
cookie: 'HOWTO-RT'
}
});
</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.
-->