From 92004aaab38fee079631651a4464a43e1d407d82 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 23 Aug 2021 13:11:41 +0900 Subject: conflicting/Tools 以下を削除 (#2065) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * conflicting/Tools/Memory/Basic_operations を削除 * conflicting/Tools/Performance を削除 - 古いバージョンについての記述であるため --- files/ja/_redirects.txt | 4 +- files/ja/_wikihistory.json | 14 -- .../tools/memory/basic_operations/index.html | 16 --- files/ja/conflicting/tools/performance/index.html | 146 --------------------- 4 files changed, 2 insertions(+), 178 deletions(-) delete mode 100644 files/ja/conflicting/tools/memory/basic_operations/index.html delete mode 100644 files/ja/conflicting/tools/performance/index.html diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 19d2a9a821..30aa22a5b7 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -2946,7 +2946,7 @@ /ja/docs/Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts /ja/docs/orphaned/Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts /ja/docs/Tools/Debugger_(before_Firefox_52)/Settings /ja/docs/orphaned/Tools/Debugger_(before_Firefox_52)/Settings /ja/docs/Tools/Debugger_(before_Firefox_52)/UI_Tour /ja/docs/orphaned/Tools/Debugger_(before_Firefox_52)/UI_Tour -/ja/docs/Tools/Memory/Comparing_heap_snapshots /ja/docs/conflicting/Tools/Memory/Basic_operations +/ja/docs/Tools/Memory/Comparing_heap_snapshots /ja/docs/Tools/Memory/Basic_operations /ja/docs/Tools/Memory/Open_the_Memory_tool /ja/docs/Tools/Memory/Basic_operations /ja/docs/Tools/Memory/Take_a_heap_snapshot /ja/docs/Tools/Memory/Basic_operations /ja/docs/Tools/Page_Inspector-redirect-1 /ja/docs/Tools/Page_Inspector @@ -2957,7 +2957,7 @@ /ja/docs/Tools/Page_Inspector/Keyboard_shortcuts /ja/docs/orphaned/Tools/Page_Inspector/Keyboard_shortcuts /ja/docs/Tools/Page_Inspector/Style_panel /ja/docs/Tools/Page_Inspector /ja/docs/Tools/Performance/Profiler_walkthrough /ja/docs/Tools/Performance/Call_Tree -/ja/docs/Tools/Profiler /ja/docs/conflicting/Tools/Performance +/ja/docs/Tools/Profiler /ja/docs/Tools/Performance /ja/docs/Tools/Release_notes /ja/docs/Mozilla/Firefox/Releases /ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone /ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE /ja/docs/Tools/Responsive_Design_Mode_(before_Firefox_52) /ja/docs/Tools/Responsive_Design_Mode diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 2c3fa16cec..8377aa3478 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -48574,20 +48574,6 @@ "mantaroh" ] }, - "conflicting/Tools/Memory/Basic_operations": { - "modified": "2020-07-16T22:36:28.978Z", - "contributors": [ - "wbamberg", - "yyss" - ] - }, - "conflicting/Tools/Performance": { - "modified": "2020-07-16T22:35:28.845Z", - "contributors": [ - "wbamberg", - "yyss" - ] - }, "conflicting/Web/API": { "modified": "2019-09-25T00:26:30.367Z", "contributors": [ diff --git a/files/ja/conflicting/tools/memory/basic_operations/index.html b/files/ja/conflicting/tools/memory/basic_operations/index.html deleted file mode 100644 index cfaf1f0c45..0000000000 --- a/files/ja/conflicting/tools/memory/basic_operations/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: ヒープのスナップショットを比較する -slug: conflicting/Tools/Memory/Basic_operations -translation_of: Tools/Memory/Basic_operations -translation_of_original: Tools/Memory/Comparing_heap_snapshots -original_slug: Tools/Memory/Comparing_heap_snapshots ---- -
{{ToolsSidebar}}
-

これは Firefox 45 の新機能です。

-
- -

Firefox 45 より、2 つのヒープのスナップショットの差分を確認できます。これは 2 つのスナップショット間で、メモリのアロケートや空き状態の違いを表示します。

- -

差分を作成するにはカメラのアイコンの隣にある "+/-" ボタンを押下して、基準とするスナップショットを選択します。そして、比較するスナップショットを選択してください。ツールが 2 つのスナップショットの差分を表示します。単体のスナップショットの場合と同じビューを使用して、差分を分析できます。

- -

{{EmbedYouTube("rbDHVxCzqhU")}}

diff --git a/files/ja/conflicting/tools/performance/index.html b/files/ja/conflicting/tools/performance/index.html deleted file mode 100644 index b4c45173f3..0000000000 --- a/files/ja/conflicting/tools/performance/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: JavaScript プロファイラ -slug: conflicting/Tools/Performance -tags: - - Debugging - - Firefox - - Guide - - Profiler - - Profiling - - Tools -translation_of: Tools/Performance -translation_of_original: Tools/Profiler -original_slug: Tools/Profiler ---- -
{{ToolsSidebar}}

プロファイラツールを使用して、JavaScript コードのボトルネックを見つけましょう。プロファイラは周期的に、サンプルについて現在の JavaScript コールスタックやコンパイルの統計情報を抽出します。

- -

"Web 開発" メニューから "プロファイラ" を選択することで、プロファイラを起動できます。"Web 開発" メニューは、Linux や OS X では "ツール" メニューの配下に、Windows では "Firefox" メニューの直下にあります。

- -

ツールボックスが開いて、プロファイラが選択されます。

- -

サンプリング型プロファイラ

- -

JavaScript プロファイラは、サンプリング型のプロファイラです。これは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。
-
- 例えば、以下のようなプログラムについて考えてみましょう:

- -
function doSomething() {
-  var x = getTheValue();
-  x = x + 1;                   // -> サンプル A
-  logTheValue(x);
-}
-
-function getTheValue() {
-  return 5;
-}
-
-function logTheValue(x) {
- console.log(x);               // -> サンプル B、サンプル C
-}
-
-doSomething();
- -

プロファイラをアクティブにしてこのプログラムを実行したら、実行時にプロファイラは上記のインラインコメントで示したように 3 つのサンプルを取得します。

- -

これらはすべて doSomething() の内部から取得されますが、2 番目の 2 つは doSomething() から呼び出された logTheValue() 関数の内部です。よってプロファイルは、以下のように 3 つのスタックトレースで構成されます:

- -
サンプル A: doSomething()
-サンプル B: doSomething() > logTheValue()
-サンプル C: doSomething() > logTheValue()
- -

これは私たちに何も伝えられない不十分なデータであることが明らかですが、より多くのサンプルにより、logTheValue() がコード内のボトルネックであると断定できるかもしれません。

- -

プロファイルの作成

- -

プロファイラでストップウォッチのボタンをクリックして、サンプルの記録を始めます。プロファイラが記録を行っている間は、ストップウォッチのボタンがハイライトされます。ボタンを再度押すと記録を停止して、新たなプロファイルを保存します:

- -

- -

"終了" をクリックすると、新しいプロファイルが自動的に開きます:

- -

- -

このペインは 2 つのパーツに分かれています:

- - - -

プロファイルの分析

- -

プロファイルは 2 つのパーツに分かれています:

- - - -

プロファイルのタイムライン

- -

プロファイルのタイムラインは、プロファイル表示の上部を占めています:

- -

横軸は時間、縦軸はサンプルにおけるコールスタックのサイズを表します。コールスタックは、サンプルを取得したときにアクティブであった関数の量を表します。

- -

チャートで赤色のサンプルは、そのときにブラウザが応答していなかったことを示しており、ユーザはアニメーションや応答性が止まったことに気づいたかもしれません。プロファイルに赤色のサンプルがある場合は、そのコードをいくつかのイベントに分解することを検討したり、requestAnimationFrame や Worker の使用について調べたりしましょう。

- -

タイムラインでクリックアンドドラッグすることで、プロファイル内の特定の範囲を調査できます:

- -

- -

タイムラインの上に "サンプリング範囲 [AAA, BBB]" というラベルがついた、新たなボタンが現れます。そのボタンを押すとプロファイルがズームされて、そのタイムスライスの詳細なビューが下部に表示されます:

- -


-

- -

プロファイルの詳細

- -

プロファイルの詳細は、プロファイル表示の下部を占めています:

- -

始めに新しいサンプルを開くと、サンプルペインには上のスクリーンショットのように "(total)" という名前の行があります。"(total)" の隣にある三角印をクリックすると、サンプル内にあるすべてのトップレベル関数がリストアップされます。

- -

- -

実行時間は当該関数が現れたサンプルの総数を示し1、その後ろにプロファイル内で当該関数が現れた全サンプルのパーセント値があります。最上段の行はプロファイル全体で 2021 のサンプルがあることを表し、また 2 行目は 1914 サンプルすなわち全体の 94.7% が、detectImage() 関数内にいたことを表します。

- -

滞在 は当該関数そのものを実行する間に取得したサンプル数を示しており、関数を呼び出しているときではありません。前出のシンプルな例では、doSomething() は実行時間が 3 (サンプル A、B、C) ですが、滞在の値は 1 (サンプル A) になるでしょう。

- -

3 列目は関数名およびファイル名と行数 (ローカルの関数) またはベースネームとドメイン名を表示します。灰色の関数はブラウザ組み込みの関数です。黒色の関数がページで読み込んだ JavaScript を表します。行にマウスポインタを乗せると、関数の識別名の右側に矢印が現れます: 矢印をクリックすると関数のソースを表示します。

- -

コールツリーの展開

- -

ある行で、この関数から呼び出された関数に滞在している間のサンプルが存在する場合 (すなわち、実行時間がその行の滞在より大きい場合) は、関数名の左側に三角印が表示され、コールツリーを展開できます。

- -

前出のシンプルな例では、完全に展開したコールツリーは以下のようになります:

- - - - - - - - - - - - - - - - - - - -
実行時間滞在 
3            100%1doSomething()
2              67%2logTheValue()
- -

より実際的な例を見ましょう: 前出のスクリーンショットで、上から 2 行目を見ると detectImage() 関数の内部で 1914 サンプルかかっていることがわかります。しかし、そのすべては detectImage() から呼び出された関数でかかっています (滞在 セルが 0 です)。コールツリーを展開して、ほとんどのサンプルがかかっていたとき実際に実行していた関数は何かを明らかにできます:

- -

- -

これは、detectAtScale() を実際に実行しているときに 6 サンプル、getRect() の実行に 12 サンプルかかっていたことなどを表します。

- -

脚注

- -
    -
  1. 関数がさまざまなソースから複数回呼び出される場合、プロファイラの出力にも複数回現れます。よって、forEach など汎用的な関数はコールツリー内に複数回現れるでしょう。
    2. -
-- cgit v1.2.3-54-g00ecf