Chromeを使用して、デベロッパーツールには、メモリリーク、メモリ拡張や頻繁にガベージコレクションを含め、メモリの問題は、ページのパフォーマンスに影響を与えるどのように見つけますか

Chromeとデベロッパーツールを使用する方法を学ぶメモリの問題は、メモリリーク、メモリ拡張や頻繁にガベージコレクションを含むページのパフォーマンスに影響を与える見つけます。

TL; DR

使用Chromeのタスクマネージャは、現在使用されているメモリの量、ページを理解します。
時間の可視化を提供するタイムライン記録用メモリを使用します。
ヒープは切り離さDOMツリー（メモリリークの一般的な原因を）決定したスナップショット。
メモリ割り当てJSヒープに新しいレコードタイムを理解するために割り当てられた時間とライン。

概要

で RAILのモデルの性能の本質、あなたの仕事のパフォーマンスの焦点は、ユーザーである必要があります。

彼らは多くの場合、ユーザに知覚されるように、メモリの問題は、非常に重要です。ユーザーは次の方法でメモリの問題を検出することができます。

経時ページのパフォーマンスが悪化します。 これは、メモリリークの症状かもしれません。ページエラー時間をかけてより多くのメモリとの多くのページで使用メモリリークの手段。
ページのパフォーマンスが非常に悪いとなっています。 これは、メモリ拡張の症状かもしれません。現在の速度の最適な使用よりもメモリのページには、より多くのメモリを使用する必要があり、拡張メモリを指します。
ページには、多くの場合、遅れまたは中断します。 これは、頻繁にガベージコレクションの症状かもしれません。ガベージコレクションは、メモリを回復するために、ブラウザを指します。ブラウザは時にガベージコレクションを決めます。リカバリ時には、すべてのスクリプトの実行は中断されます。ブラウザは、多くの場合、ガベージコレクションであればそのため、スクリプトの実行が頻繁に中断されます。

メモリ拡張：どのように「あまり」を定義するには？

メモリリークを判断することは容易です。サイトはより多くのメモリを使用する場合、メモリリークが発生します。ただし、メモリ拡張を定義するのはより困難です。「あまりにも多くのメモリを使用する」とは何を考えられていますか？

異なるデバイスやブラウザの異なる能力を持っているので、ここでは何も難しい数字は、ありません。ローエンドのスマートフォンで崩壊して、同じページ上のハイエンドのスマートフォン上で動作して滑らか。

キーは、レールが定義されており、ユーザー中心のモデルを使用することです。ユーザーで人気のものを装備して、これらのデバイス上であなたのページをテストご覧ください。経験が悪くなっている場合、ページは、これらのデバイスのメモリ能力を超えることがあります。

使用クロームタスクマネージャは、リアルタイムでのメモリ使用量を監視します

クロームタスクマネージャは、メモリの問題の調査のための開始点として使用します。タスクマネージャを使用すると、現在使用中のメモリページの量を伝えることができ、リアルタイムモニタです。

押して、 Shift+ Esc またはメインメニューに行くとChromeを選択し 、より多くのツール ]> [ タスクマネージャを、タスクマネージャを開きます。
テーブルヘッダータスクマネージャを右クリックし、有効 JavaScriptのメモリーを。
以下の2つのページはあなたを伝えることができることについてさまざまな情報のメモリ使用量：
- メモリの 列には、ネイティブのメモリを表します。DOMノードは、ネイティブメモリ内に保存されています。この値が増加している場合は、DOMノードを作成しています。
- JavaScriptのメモリの 列には、JSヒープを表します。この列には、2つの値が含まれています。あなたは（括弧内の数字）リアルタイムデジタルに興味を持っていた値。リアルタイムの数字は、ページ上のオブジェクトが使用している達することができるメモリの量を示しています。この数が増加している場合、いずれかの新しいオブジェクトを作成している、いずれかの既存のオブジェクトが高まっています。
視覚的なメモリリークを記録するタイムラインを使用して

また、調査のための開始点として、タイムラインパネルを使用することができます。タイムラインパネルでは、直感的に一定期間のページメモリの使用状況を理解するのに役立ちます。
1. デベロッパーツールで開き、 タイムライン パネル。
2. 有効 メモリ チェックボックスをオンにします。
3. メモを取ります。
ヒント：より良いアプローチは、必須のガベージコレクションの開始と終了の記録を使用することです。クリックして録音するとき の収集ごみの ボタンを（）ガベージコレクションを強制することができます。

タイムラインメモリの記録を表示するには、次のコードを使用することを検討してください。
```
VAR X = []; 

関数が成長（）{
   のために（varが、私は= 0; I <10000; I ++ ）{ 
    document.body.appendChild（のdocument.createElement（ 'DIV' ））; 
  } 
  x.push（新しいアレイ（1000000）.join（ 'X' ））; 
} 

のdocument.getElementById（ '成長'）は、addEventListener（、 'クリック'育ちます）。
```
```
 
```
各タイムコードで参照ボタンは、文書の本体は、10,000追加となり div 、ノード、および1,000,000 x プッシュ文字列 x配列。タイムラインは、このコードは、以下のスクリーンショットのようにレコードを生成します実行します。
まずは、ユーザーインターフェースを説明しましょう。概要ペイン ヒープ チャート（NET 以下）JSヒープを示しています。概要下のペインには、あるカウンターペイン。ここから、あなたはJSヒープ（とすることによって、メモリの使用状況を見ることができる の概要 ペイン HEAP 同じチャート）、ドキュメント、DOMノード、リスナーとGPUのメモリ・セグメント。チャートで非表示にするには、対応するチェックボックスを無効にします。

今、私たちはコードのスクリーンショットを分析します。あなたはノード数カウンタ（緑のグラフ）を見れば、あなたはそれが正確にコードが一致していることがわかります。離散ステップで増加するようにノードカウントモード。あなたは、各ノード数が増加していることを前提とすることができます grow() コール。JSグラフ表示スタック（ブルーチャート）直接ではなく。ベストプラクティスに準拠するために、最初の減少は、実際に（押して強制的にガベージコレクションで 収集ごみ 実現ボタンを）。レコードとして、あなたは千鳥JSヒープサイズの変更のレベルが表示されます。この現象は正常であり、予想される：ボタンをクリックするたびに、多くのことを達成する100万文字コードの間に文字列を作成するために、DOMノードを作成するJavaScriptコード。ここで重要なのは、ヒープが冒頭より大きくなり、JSで終わりに（ここでは、「スタート」必須ガベージコレクションの後の時点を指します）。あなたはこのノードJSヒープサイズやパターンのサイズを増やすのを見てきた場合は、実際の使用では、メモリリークがあるかもしれません。

使用ヒープメモリリークが別々のDOMツリーで発見されているスナップショット

のみもはやDOMノードを参照されたページのDOMツリーまたはJavaScriptコードは、DOMノードが廃棄物として回収されるとき。ノードがDOMツリーから削除されますが、いくつかのJavaScriptはまだそれを参照されている場合は「単離された。」と、私たちは、このノードを呼び出します独立DOMノードは、メモリリークの一般的な原因です。このセクションでは、ノードが分離デベロッパーツールヒープアナライザ決定する方法を使用する方法をお教えします。

以下は分離DOMノードの簡単な例です。
```
VaRのdetachedNodes。

関数は、（）を作成{ 
  VAR UL =のdocument.createElement（ 'UL'）; 
  ため（VAR I = 0; I <10; I ++）{ 
    VARのリチウム=のdocument.createElement（ 'リー'）。
    ul.appendChild（LI）。
  } 
  detachedTree = UL。
} 

のdocument.getElementById（ '作成'）のaddEventListener（ 'クリック'を作成）。
```
　　
```
 
```
コード内で参照をクリックし10含有ボタン作成 li サブレベル ul ノード。これらのノードはコードではなく、DOMツリー内で参照されているので、彼らは分離されています。

スタックのスナップショットを決定する一つの方法は、分離されたノードです。名前が示すように、ヒープメモリのスナップショットが対象とJSのDOMノード間で割り当てることができますが表示されたときに、あなたのページのスナップショットを取ります。

スナップショット、オープンデベロッパーツールを作成してに移動するには プロファイル パネル、選択 ヒープスナップショットの取り ラジオボタンをし、Enterキーを押し テイクスナップショット ボタンを。

スナップショットは、プロセスや負荷に時間がかかる場合があります。終了したら、左側のパネル（名前は HEAPスナップショットには、スナップショットを選択します）。

で クラスフィルタ テキストボックス、入力し Detachedた検索は、DOMツリーを分離しました。
別のツリーを調査するために三角形を展開します。
そのJavaScriptコードへの直接参照を有する黄色ノードでハイライト。赤ノードでハイライトを直接参照されません。唯一のアクティブなツリー黄色のノード、の一部のみ。一般的には、黄色のノードに焦点を当てる必要があります。コードを修正し、黄色のノードのアクティブ時間が必要な時間よりはありませんが、あなたはまた、木の黄色のノードに属する赤のノードを排除する必要があります。

黄色のノードは、さらなる調査を行ってクリックしてください。では 、オブジェクト ペイン、あなたはノードを参照されているコードに関連する詳細情報を見ることができます。例えば、下のスクリーンショットでは、あなたが見ることができる detachedTree の変数ノードを参照しています。この特定のメモリリークを解決するには、使用勉強する必要がある detachedTree コードのをして確認してください必要がないとき、このコードは、ノードへの参照を削除することができます。
タイムラインを使用してヒープメモリリークがJSを決定割り当て

あなたはタイムラインがJSヒープメモリリークを追跡するための別のツールで割り当てることができます。

タイムラインの分布を表示するには、次のコードを考えてみます。
```
var x =[];

function grow(){
  x.push(newArray(1000000).join('x'));
}

document.getElementById('grow').addEventListener('click', grow);
```
コードで参照されるたびに、ボタンは、することになります x 百万文字列の文字列を追加します。

レコードの配信タイムライン、オープンデベロッパーツールに、その後に移動 プロファイル] を選択し、パネル のレコードの割り当てタイムライン 、ラジオ・ボタンを押して スタート メモリリークを引き起こしている疑いのあるあなたの操作を実行するためのボタンを。終了したら、押して 停止録音 ボタン（）。

記録時、任意の割り当てが（スクリーンショット以下に示すように）青い垂直タイムライン上に表示される。なお。

青色の縦線は、新しいメモリ割り当てを表します。メモリリークが新しいメモリの割り当てがあるかもしれません。あなたは垂直線にズームインすることができ、 コンストラクタの フィルターペインには、唯一のオブジェクトの指定された時間枠内に分布表示します。

オブジェクトを展開し、その値をクリックして 、オブジェクト の詳細ペインのためにそれを表示します。たとえば、新しいオブジェクトの詳細を表示することにより分布、下のスクリーンショットでは、あなたはそれが割り当てられていることがわかります Window のスコープ x の変数。

プレス調査メモリ割り当て関数

使用 レコード配分プロファイラ タイプJavaScript関数は、メモリの割り当てを見ることができます。

選択 レコードの配分プロファイラ のラジオボタンを。ページ上の労働者が存在する場合は、使用することができます スタート 解析対象として、それを選択するために、ボタンの横にあるドロップダウンメニューを。
押して スタート ボタンを。
あなたが調査したいページ上の操作を実行します。
すべての操作が完了すると停止ボタンを押します。

表示内容の関数として、デベロッパーツールメモリの割り当て。デフォルトのビューがある ヘビー（ボトムアップ）、最上部に表示されたほとんどのメモリ機能が割り当てられます。

その頻繁にガベージコレクションを見つけました

あなたはページが頻繁に一時停止を感じる場合は、ガベージコレクションがあるかもしれません。

あなたはクロームタスクマネージャまたはタイムラインメモリレコードが頻繁にガベージコレクションを発見し使用することができます。タスクマネージャでは、メモリー やJavaScriptのメモリ値がしばしば上昇し、秋には、頻繁にガベージコレクションの存在を示します。タイムラインを記録する際に、JSヒープまたはノードカウントが頻繁にガベージコレクションの存在をしばしば示すグラフで立ち上がりと立ち下がり。

問題を決定した後、あなたはメモリが割り当てられ、どのような分布関数につながっているものを見つけるためにタイムラインレコードを割り当てることができます。