blob: ed58a0c0219407c580e2038e1ca1e507faf970b5 (
plain)
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
---
title: UI ツアー
slug: Tools/Performance/UI_Tour
translation_of: Tools/Performance/UI_Tour
---
<div>{{ToolsSidebar}}</div><p>パフォーマンスツールの UI は、大きく 4 つに分けられます:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13220/perf-tool-pieces.png" style="display: block; height: 351px; margin-left: auto; margin-right: auto; width: 808px;"></p>
<ul>
<li><a href="/ja/docs/Tools/Performance/UI_Tour#Toolbar">ツールバー</a></li>
<li><a href="/ja/docs/Tools/Performance/UI_Tour#Recordings_pane">記録ペイン</a></li>
<li><a href="/ja/docs/Tools/Performance/UI_Tour#Recording_overview">記録の概要</a></li>
<li><a href="/ja/docs/Tools/Performance/UI_Tour#Details_pane">詳細ペイン</a>、これは以下のいずれかが入ります:
<ul>
<li><a href="/ja/docs/Tools/Performance/Waterfall">タイムライン</a></li>
<li><a href="/ja/docs/Tools/Performance/Call_Tree">呼び出しツリー</a></li>
<li><a href="/ja/docs/Tools/Performance/Flame_Chart">フレームチャート</a></li>
</ul>
</li>
</ul>
<h2 id="Toolbar" name="Toolbar">ツールバー</h2>
<p>ツールバーには、以下のボタンがあります:</p>
<ul>
<li>記録を開始および終了する</li>
<li>過去に保存した記録をインポートする</li>
<li>記録ペインを消去する。<em>これを行うと、未保存の記録をすべて失うので注意してください。</em></li>
<li>タイムラインビューで表示する<a href="/ja/docs/Tools/Performance/Waterfall#Markers">マーカー</a>をフィルタリングする</li>
<li><a href="/ja/docs/Tools/Performance/UI_Tour#Details_pane">詳細ペイン</a>のツールを切り替える</li>
<li>設定用のポップアップメニューを開く</li>
</ul>
<p><img alt="" src="https://mdn.mozillademos.org/files/13222/perf-toolbar.png" style="display: block; height: 434px; margin-left: auto; margin-right: auto; width: 836px;"></p>
<h2 id="Recordings_pane" name="Recordings_pane">記録ペイン</h2>
<p>記録ペインでは、現在のセッションで取得した記録やインポートした記録を含む、読み込み済みの全記録を一覧表示します。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10917/perf-recordings-pane.png" style="display: block; height: 337px; margin-left: auto; margin-right: auto; width: 300px;"></p>
<p>いつでも記録を選択すると、その記録の情報を他のペインに表示します。記録ペインで別の項目をクリックすると、その記録を選択できます。"保存" をクリックすると、記録を JSON ファイルとして保存できます。</p>
<h2 id="Recording_overview" name="Recording_overview">記録の概要</h2>
<p>ここでは、X 軸を時間として記録全体の概要を表示します。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10919/perf-overview.png" style="display: block; height: 164px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<p>ここにはタイムラインの概要とフレームレートのグラフという、2 つの要素があります。</p>
<h3 id="Waterfall_overview" name="Waterfall_overview">タイムラインの概要</h3>
<p>ここでは、<a href="/ja/docs/Tools/Performance/Waterfall">タイムライン</a>をコンパクトに表示したビューを提供します:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10923/perf-waterfall-overview.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<p>記録した処理は、<a href="/ja/docs/Tools/Performance/Waterfall#Markers">タイムラインビューと同じ方式</a>で色分けされます。</p>
<h3 id="Frame_rate_graph" name="Frame_rate_graph">フレームレートのグラフ</h3>
<p>フレームレートは、記録している間のブラウザの応答性を概観します:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10921/perf-frame-rate.png" style="display: block; height: 88px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<p><a href="/ja/docs/Tools/Performance/Frame_rate">フレームレート</a>の個別記事をご覧ください。</p>
<h3 id="Correlating_events" name="Correlating_events">イベントを関連づける</h3>
<p>複数の要素が同期しているため、ある要素のイベントと別の要素のイベントに関連性を見いだせる場合があります。</p>
<p>例えば以下のスクリーンショットでは、長時間の描画操作 (タイムラインの概要では<a href="/ja/docs/Tools/Performance/Waterfall#Markers">緑色のバーで表示</a>) とフレームレートの落ち込みに関連性があります:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10925/perf-overview-correlation.png" style="display: block; height: 494px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<h3 id="Zooming_in" name="Zooming_in">拡大</h3>
<p>記録を詳しく調査するため、概要ビューで記録の一部分を選択できます。一部分を選択すると、その部分だけを含むようにメインビューを更新します。以下のスクリーンショットではフレームレートが落ち込んだ部分を選択して、長時間の描画操作を詳しく見ています:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10927/perf-zoomed.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<h2 id="Details_pane" name="Details_pane">詳細ペイン</h2>
<p>詳細ペインでは、選択したツールの情報を表示します。ツールを切り替えるには、<a href="/ja/docs/Tools/Performance/UI_Tour#Toolbar">ツールバー</a>のボタンを使用してください。</p>
<h3 id="Waterfall" name="Waterfall">タイムライン</h3>
<p>タイムラインでは、記録中にブラウザが実行した操作 (JavaScript を実行、CSS を更新、ページのレイアウトを更新、再描画を実行など) を表示します。X 軸は時間を表し、記録した操作を滝のように、またブラウザが実行した操作の連続性を反映するように配置します。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10929/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<p>タイムラインについて詳しくは、<a href="/ja/docs/Tools/Performance/Waterfall">タイムライン</a>のページをご覧ください。</p>
<h3 id="Call_Tree" name="Call_Tree">呼び出しツリー</h3>
<p>呼び出しツリーは、ページで実行している JavaScript のサンプリングプロファイラです。これは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10949/perf-call-tree.png" style="display: block; height: 384px; margin-left: auto; margin-right: auto; width: 972px;"><br>
呼び出しツリーについて詳しくは、<a href="/ja/docs/Tools/Performance/Call_Tree">コールツリー</a>のページをご覧ください。</p>
<h3 id="Flame_Chart" name="Flame_Chart">フレームチャート</h3>
<p>呼び出しツリーが記録中にサイトのどの関数で、もっとも多くの実行時間がかかったかを示すものであるなら、フレームチャートは実行中のある時点のコールスタックを示すものです:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10933/perf-flame-chart.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<p>フレームチャートについて詳しくは、<a href="/ja/docs/Tools/Performance/Flame_Chart">フレームチャート</a>のページをご覧ください。</p>
<h3 id="Allocations" name="Allocations">メモリ割り当て</h3>
<div class="geckoVersionNote">
<p>メモリ割り当てビューは、Firefox 46 の新機能です。</p>
</div>
<p>メモリ割り当てビューは呼び出しツリービューと似ていますが、こちらはメモリ割り当てに特化したビューです。プロファイルの中でページ内のどの関数がもっとも多くのメモリ割り当てを行ったかを表示します。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/12413/allocations-view-1.png" style="display: block; margin-left: auto; margin-right: auto; width: 972px;"></p>
<p>メモリ割り当てビューは、プロファイルを記録する前にパフォーマンスツールの設定で "メモリ割り当てを記録" にチェックを入れた場合に限り表示します:</p>
<p>{{EmbedYouTube("Le9tTo7bqts")}}</p>
<p>メモリ割り当てビューについて詳しくは、<a href="/ja/docs/Tools/Performance/Allocations">メモリ割り当てビュー</a>のページをご覧ください。</p>
|
