メモリリークとそれらをクロムdevツールを使用して見つける方法

メモリリークは非常にアプリケーションで見つけるのは難しいですし、いくつかの予防措置を取ることによってコードを書くの間に回避することができます.すべての開発者は、最も一般的なメモリリークパターンを認識する必要があります.
この記事では、アプリケーションのメモリライフサイクルパターン、メモリリークの最も一般的な原因、およびChromeのDevツールでそれらを識別する方法について説明します.

メモリライフサイクルパターン
メモリライフサイクルパターンでは、コードにいくつかのメモリが割り当てられ、割り当てられたメモリがコードによって使用され、コードが実行されると解放されます.


メモリリークの原因
1 .偶然のグローバルnon-strict モード

function iCauseMemoryLeak() {
  temp = 1;
}

ここでは、値をtemp のスコープで利用できない変数iCauseMemoryLeak 関数.JavaScriptコンパイラは、global 範囲と変数temp 今後はごみ集めではありません.それはあなたのアプリケーションのライフサイクル中に永遠にそこにとどまる.
2 .忘れられたタイマー

setTimeout(() => {
  /** Perform a task here.. */
}, 1000);

// OR

setInterval(() => {
  /** Perform a task here.. */
}, 1000);

タイマーは、タスクを実行するために動的なメモリを割り当てます、そして、タイマーをクリアするのを忘れるならば、それはメモリリークを引き起こします.
あなたはクリアすることができますsetTimeout 使用clearTimeout and setInterval 使用clearInterval

var a = setTimeout(() => {
  /** Perform a task here.. */
}, 1000);

clearTimeout(a);

// OR

var b = setInterval(() => {
  /** Perform a task here.. */
}, 1000);

clearInterval(b);

DOM操作
ボタンを2つ持っていて、ボタンをクリックすると、DOMからボタン2が取り除かれます.

const buttonOne = document.querySelector('#button-a');
const buttonTwo = document.querySelector('#button-b');

buttonOne.addEventListener('click', () => {
    document.body.removeChild(buttonTwo);
});

上のコードではbuttonTwo ドムからクリックbuttonOne , しかし、我々はbuttonTwo 変数に格納されますbuttonTwo . この種のメモリリークは非常に危険です.
これを避けるためにbuttonTwo インサイドclick イベントリスナー.

const buttonOne = document.querySelector('#button-a');

buttonOne.addEventListener('click', () => {
    const buttonTwo = document.querySelector('#button-b');
    document.body.removeChild(buttonTwo);
});

ここで、我々はbuttonTwo をクリックしてDOMからbuttonOne そしてゴミ集めです.

クロムdevツールの識別

オープンクロームdevツール

あなたのウェブサイトを読み込みます.

パフォーマンスパネルの「メモリチェックボックス」を選択し、「再読み込み」アイコンをクリックします.

プロファイルとメモリグラフを読み込みます.

メモリグラフの解析
イメージエー

イメージB

あなたはどう思いますか.どのイメージがメモリリークを表しますか?
メモリライフサイクルパターンに従って答えを見つけましょう.

Allocate memory, Use memory and Release memory.

画像Aでは、アプリケーションが起動すると、いくつかのメモリを使用して、それを解放し、この自然は、アプリケーションがロード状態になるまでに従います.最後に、アプリケーションが読み込まれると、グラフは、ほぼ直線とフラット滞在することがわかります.それは、アプリケーションAがアプリケーション実行時間のために予約されたメモリを必要とすると、必要なメモリが一定であることを示します.
一方、画像Bにおいては、メモリグラフは常に最後まで増加しており、これらはステップ機能であり、これらのグラフは時間とともにメモリの増加を表している.
今、イメージBはメモリリークを表していると言える.
この記事を読んで楽しんでください.ハッピーラーニング.
P . S .あなたは、私が記憶グラフを生み出したイメージAのウェブサイトを推測することができますか?

参考文献

Garbage collection in Javascript

setTimeout and setInterval

Chrome Dev Tools Documentaion