From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/tools/performance/index.html | 80 +++++++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 files/ja/tools/performance/index.html (limited to 'files/ja/tools/performance/index.html') 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 +--- +
{{ToolsSidebar}}

パフォーマンスツールは、サイトの一般的な応答性、JavaScript やレイアウトのパフォーマンスを知ることができるツールです。パフォーマンスツールを使用してあなたのサイトで、ある期間の記録やプロファイルを作成できます。記録後は、プロファイル内でサイトをレンダリングするためにブラウザーが行ったことの概要や、プロファイル内のフレームレートを表示します。

+ +

プロファイルのさまざまな側面を詳しく調査するために、4 つのサブツールを使用できます:

+ + + +

{{EmbedYouTube("WBmttwfA_k8")}}

+ +
+

はじめに

+ +
+
+
+
UI ツアー
+
パフォーマンスツールについてひととおり理解するために、UI のクイックツアーを用意しました。
+
+
+ +
+
+
操作手順
+
基本操作: ツールを開く、記録を作成・保存・読み込み・設定する
+
+
+
+ +
+

パフォーマンスツールのコンポーネント

+ +
+
+
+
フレームレート
+
サイトの全体的な応答性を理解します。
+
呼び出しツリー
+
サイトの JavaScript のボトルネックを発見します。
+
メモリ割り当て
+
記録の中でコードが実施したメモリ割り当てを表示します。
+
+
+ +
+
+
タイムライン
+
サイトとの対話として、ブラウザーが実行した作業を理解します。
+
フレームチャート
+
記録全体で、どの JavaScript 関数をいつ実行したかを明らかにします。
+
+
+
+ +
+

シナリオ

+ +
+
+
+
CSS プロパティのアニメーション
+
ブラウザーがどのようにページを更新するか、およびさまざまな CSS プロパティのアニメーションがパフォーマンスにどのような影響を与えるかを、タイムラインを使用して理解します。
+
+
+ +
+
+
集約的な JavaScript
+
長時間実行される JavaScript によって引き起こされるパフォーマンスの問題、およびこのような状況で Worker がどのように役立つかを明らかにするために、フレームチャートとタイムラインを使用します。
+
+
+
-- cgit v1.2.3-54-g00ecf