blob: 8abebb675e70a505060639f0204ba4f666b56e67 (
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
|
---
title: パフォーマンス
slug: Tools/Performance
translation_of: Tools/Performance
---
<div>{{ToolsSidebar}}</div><p>パフォーマンスツールは、サイトの一般的な応答性、JavaScript やレイアウトのパフォーマンスを知ることができるツールです。パフォーマンスツールを使用してあなたのサイトで、ある期間の記録やプロファイルを作成できます。記録後は、プロファイル内でサイトをレンダリングするためにブラウザーが行ったことの<a href="/ja/docs/Tools/Performance/UI_Tour#Waterfall_overview">概要</a>や、プロファイル内の<a href="/ja/docs/Tools/Performance/Frame_rate">フレームレート</a>を表示します。</p>
<p>プロファイルのさまざまな側面を詳しく調査するために、4 つのサブツールを使用できます:</p>
<ul>
<li><a href="/ja/docs/Tools/Performance/Waterfall">タイムライン</a>はレイアウトの実行、JavaScript の実行、再描画、ガベージコレクションといった、ブラウザーが実行したさまざまな操作を明らかにします。</li>
<li><a href="/ja/docs/Tools/Performance/Call_Tree">呼び出しツリー</a>は、ブラウザーがもっとも多くの時間を費やした JavaScript 関数を明らかにします。</li>
<li><a href="/ja/docs/Tools/Performance/Flame_Chart">フレームチャート</a>は、記録全体の JavaScript コールスタックを明らかにします。</li>
<li><a href="/ja/docs/Tools/Performance/Allocations">メモリ割り当て</a>ビューは、記録の中でコードが実行したヒープ割り当てを表示します。</li>
</ul>
<p>{{EmbedYouTube("WBmttwfA_k8")}}</p>
<hr>
<h2 id="Getting_started" name="Getting_started">はじめに</h2>
<div class="column-container">
<div class="column-half">
<dl>
<dt><a href="/ja/docs/Tools/Performance/UI_Tour">UI ツアー</a></dt>
<dd>パフォーマンスツールについてひととおり理解するために、UI のクイックツアーを用意しました。</dd>
</dl>
</div>
<div class="column-half">
<dl>
<dt><a href="/ja/docs/Tools/Performance/How_to">操作手順</a></dt>
<dd>基本操作: ツールを開く、記録を作成・保存・読み込み・設定する</dd>
</dl>
</div>
</div>
<hr>
<h2 id="Components_of_the_Performance_tool" name="Components_of_the_Performance_tool">パフォーマンスツールのコンポーネント</h2>
<div class="column-container">
<div class="column-half">
<dl>
<dt><a href="/ja/docs/Tools/Performance/Frame_rate">フレームレート</a></dt>
<dd>サイトの全体的な応答性を理解します。</dd>
<dt><a href="/ja/docs/Tools/Performance/Call_Tree">呼び出しツリー</a></dt>
<dd>サイトの JavaScript のボトルネックを発見します。</dd>
<dt><a href="/ja/docs/Tools/Performance/Allocations">メモリ割り当て</a></dt>
<dd>記録の中でコードが実施したメモリ割り当てを表示します。</dd>
</dl>
</div>
<div class="column-half">
<dl>
<dt><a href="/ja/docs/Tools/Performance/Waterfall">タイムライン</a></dt>
<dd>サイトとの対話として、ブラウザーが実行した作業を理解します。</dd>
<dt><a href="/ja/docs/Tools/Performance/Flame_Chart">フレームチャート</a></dt>
<dd>記録全体で、どの JavaScript 関数をいつ実行したかを明らかにします。</dd>
</dl>
</div>
</div>
<hr>
<h2 id="Scenarios" name="Scenarios">シナリオ</h2>
<div class="column-container">
<div class="column-half">
<dl>
<dt><a href="/ja/docs/Tools/Performance/Scenarios/Animating_CSS_properties">CSS プロパティのアニメーション</a></dt>
<dd>ブラウザーがどのようにページを更新するか、およびさまざまな CSS プロパティのアニメーションがパフォーマンスにどのような影響を与えるかを、タイムラインを使用して理解します。</dd>
</dl>
</div>
<div class="column-half">
<dl>
<dt><a href="/ja/docs/Tools/Performance/Scenarios/Intensive_JavaScript">集約的な JavaScript</a></dt>
<dd>長時間実行される JavaScript によって引き起こされるパフォーマンスの問題、およびこのような状況で Worker がどのように役立つかを明らかにするために、フレームチャートとタイムラインを使用します。</dd>
</dl>
</div>
</div>
|
