blob: 29a7719108596bae2dbc616c1fda1d543405b31c (
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
81
82
83
84
85
86
|
---
title: メモリ割り当て
slug: Tools/Performance/Allocations
translation_of: Tools/Performance/Allocations
---
<div>{{ToolsSidebar}}</div><div class="summary">
<p>パフォーマンスツールのメモリ割り当てビューは、プロファイルの中でページ内のどの関数がもっとも多くのメモリ割り当てを行ったかを表示します。</p>
<p>メモリを大量に割り当てたりメモリ割り当てを多数行ったりすると<a href="/ja/docs/Tools/Performance/Allocations#Allocations_and_garbage_collection">ガベージコレクション</a>を引き起こすため、パフォーマンスの観点で重要です。ガベージコレクションは、ページの応答性を損なう可能性があります。</p>
</div>
<div class="geckoVersionNote">
<p>メモリ割り当てビューは、Firefox 46 の新機能です。</p>
</div>
<p>メモリ割り当てビューを有効にするため、プロファイルを記録する<em>前に</em>パフォーマンスツールの設定で "メモリ割り当てを記録" にチェックを入れなければなりません。そして通常どおり<a href="/ja/docs/Tools/Performance/How_to#Record_a_profile">プロファイルの記録</a>を行うと、ツールバーに "メモリ割り当て" という新たなタブが現れます:</p>
<p>{{EmbedYouTube("Le9tTo7bqts")}}</p>
<h2 id="Anatomy_of_the_allocations_view" name="Anatomy_of_the_allocations_view">メモリ割り当てビューを分析する</h2>
<p>メモリ割り当てビューは、以下のようなものです:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/12393/allocations-view-1.png" style="display: block; height: 156px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>メモリ割り当てビューは、記録中に行われたメモリ割り当てを定期的にサンプリングします。それぞれの行は、記録中に少なくとも 1 回、メモリ割り当てのサンプルを取得した関数を表します。</p>
<p>各行に、以下の列があります:</p>
<ul>
<li>Self Count: 関数内で取得したメモリ割り当てサンプルの数 (合計に対するパーセント値も表示します)</li>
<li>Self Bytes: 関数内のメモリ割り当てサンプルで割り当てたメモリの総バイト数 (合計に対するパーセント値も表示します)</li>
</ul>
<p>行は "Self Bytes" 列の値でソートします。</p>
<p>よって、前出の例では以下のことが分かります:</p>
<ul>
<li><code>signalLater()</code> で 8904 個のサンプルを取得しており、これは総サンプル数の 28.57% です。</li>
<li>それらのサンプルで 1102888 バイトのメモリを割り当てており、これはすべてのサンプルが割り当てたメモリの 30.01% です。</li>
</ul>
<p>それぞれの関数名の隣に、展開用の三角印があります。これをクリックすると、関数を呼び出した場所がわかります:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/12397/allocations-view-2.png" style="display: block; height: 155px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>この例では <code>signalLater()</code> が 2 つの場所から呼び出されたことが分かります。<code>removeInner()</code> と <code>setSelectionInner()</code> です。この方法でコールスタックを戻ることができ、メモリ割り当ての状況をよく理解できます。</p>
<h3 id="Self_Cost_and_Total_Cost" name="Self_Cost_and_Total_Cost">Self Cost と Total Cost</h3>
<ul>
</ul>
<p>このビューでは、列が "Self" と "Total" の 2 つのセットに分けられていることがわかるでしょう。"Self" は、関数自体で取得したサンプルを記録します。"Total" は関数自体と、この関数から呼び出した関数で取得したサンプルを記録します。ビューではツリーの葉に位置する関数をトップレベルに置きます (つまり、コールスタックを反転して表示します) ので、トップレベルではどちらも同じ値になります。一方、コールスタックを戻っていくと違いが出てくることがわかるでしょう:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/12397/allocations-view-2.png" style="display: block; height: 155px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>この図では、<code>signalLater()</code> で 8904 個のサンプルを取得しています。しかし <code>signalLater()</code> は、<code>removeInner()</code> と <code>setSelectionInner()</code> の 2 か所から呼び出されています。これらの関数はどちらも Self Count が 0 であり、その関数内で直接メモリ割り当ては行っていないことを意味します。一方、<code>removeInner()</code> の Total Count は 8901、<code>setSelectionInner()</code> の Total Count はわずか 3 です。これは 8904 回のメモリ割り当てが、<code>removeInner()</code> の枝で行われた 3回を除き、すべて <code>signalLater()</code> で発見されたことを語ります。</p>
<h2 id="Allocations_and_garbage_collection" name="Allocations_and_garbage_collection">メモリ割り当てとガベージコレクション</h2>
<p>当然ながらサイト内で割り当てたメモリは、知っておくと役に立つ情報です。しかし、サイトのメモリ割り当てのプロファイルとサイトの応答性を主に結びつけるものは、ガベージコレクション (GC) のコストです。</p>
<p>ガベージコレクションを行う JavaScript などの言語は、<a href="/ja/docs/Tools/Memory/Dominators#Reachability">到達性</a>がなくなったオブジェクトを発見するためにランタイムが定期的にヒープを走査して、そのようなオブジェクトが占めていたメモリを解放しなければなりません。このような GC イベントを実行する間は JavaScript エンジンが一時停止しますので、プログラムが休止して応答性が完全になくなります。</p>
<p>応答性への影響を軽減するため <a href="/ja/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> (Firefox の JavaScript エンジン) は少しずつ増加する GC を実施でき、GC の合間にプログラムを実行できます。それでも時にはノンインクリメンタルガベージコレクションが必要であり、この場合プログラムは完了するまで待たなければなりません。</p>
<p>GC イベントは<a href="/ja/docs/Tools/Performance/Waterfall">タイムライン</a>ビューで赤色のマーカーで示され、時には数百ミリ秒続くなど応答性に危険信号がともります:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/12399/allocations-view-long-gc.png" style="display: block; height: 160px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>サイトのパフォーマンスプロファイルに GC イベントがある場合、何ができるのでしょうか? SpiderMonkey は、いつどのようなガベージコレクションを行うかを決めるために<a href="https://dxr.mozilla.org/mozilla-central/rev/584870f1cbc5d060a57e147ce249f736956e2b62/js/src/gc/GCRuntime.h#192">複雑なヒューリスティック技術</a>を使用しています。</p>
<p>ただし、通常は<em>メモリ割り当ての圧力 (大量のメモリを割り当てる、または高い頻度でメモリを割り当てる) によって SpiderMonkey がガベージコレクションを行う可能性が高くなり、さらにインクりメンタルではないガベージコレクションを行う可能性も高くなります</em>。</p>
<p>メモリ割り当ての圧力によってガベージコレクションが発生した場合は、タイムラインのマーカーの右側にあるサイドバーで "Show allocation triggers" という名前のリンクを表示します。このリンクをクリックすると開発ツールがメモリ割り当てビューに切り替わり、前回の GC が終了したときからクリックした GC が始まるときまでの時間帯を選択します。これにより、GC イベントを引き起こしたメモリ割り当てを集約して表示します:</p>
<p>{{EmbedYouTube("tO5ovD9Jw4k")}}</p>
<p>このような問題がみられる場合は、そのときに行っているメモリ割り当ての回数や量を削減できないか検討してください。例えば:</p>
<ul>
<li>始めにメモリを割り当てるのではなく、実際必要なときに順次メモリを割り当てられませんか?</li>
<li>ループ内でメモリを割り当てている場合、ひとつのメモリ領域を毎回の処理で再使用できませんか?</li>
</ul>
|
