---
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>