1 files changed, 80 insertions, 0 deletions
diff --git a/files/ja/tools/performance/index.html b/files/ja/tools/performance/index.html
new file mode 100644
index 0000000000..8abebb675e
--- /dev/null
+++ b/files/ja/tools/performance/index.html
@@ -0,0 +1,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>