Javascriptでのメモリリークの根絶

ガベージコレクションされた言語でのリークの主な原因は、不要な参照です。メモリリークを理解するために、メモリ解放（ガベージコレクション）がどのように機能するかを見てみましょう。

マークアンドスイープアルゴリズム -このアルゴリズムは、「オブジェクトは不要になりました」の定義を「オブジェクトに到達できません」に減らします。このアルゴリズムは、ルートと呼ばれるオブジェクトのセットの知識を前提としています。 JavaScriptでは、ルートはグローバルオブジェクトです。定期的に、GCはこれらのルートから開始し、これらのルートから参照されているすべてのオブジェクトを再帰的に検索します。したがって、ルートから開始して、GCは到達可能なすべてのオブジェクトを検索し、到達不可能なすべてのオブジェクトを収集します。

メモリリークの種類

1。グローバル変数（宣言されていない/偶発的）

JSでは、宣言キーワード（let、var、const）を指定しないと、誤って変数をグローバルに宣言する可能性があります。 JSは、グローバルスコープに到達するまでスコープ内で移動することを検索し、どのスコープでも変数が見つからない場合は、グローバル変数を作成します。

例

function test() {
   a = [1, 2, 3]
}
test()
// a was initialized without declaration using a keyword and is now in the global scope.
console.log(a)

出力

[1, 2, 3]

変数が無意識のうちにグローバルスコープに存在し、プログラムが終了しない限り解放されないため、この動作によりメモリリークが発生する可能性があります。これは、宣言キーワードを使用して修正できます。

2。閉鎖

変数が外部関数で宣言され、ネストされた内部関数で自動的に使用可能になり、ネストされた関数で使用/参照されていない場合でもメモリ内に残り続けると、クロージャでメモリリークが発生します。

3。切り離されたDOM/DOM参照外

DOMは二重にリンクされたツリーであり、ツリー内の任意のノードを参照すると、ツリー全体がガベージコレクションされなくなります。分離されたDOMまたはOutofDOM参照は、DOMから削除されたが、JSを介してメモリ内にあるノードを意味します。つまり、変数またはオブジェクトへの参照がどこかにある限り、そのオブジェクトはDOMから削除された後でもガベージコレクションされません。 DOMの一部を使い終わったら、必ずJSから参照を削除してください。

4。イベントリスナー

addEventListener（）メソッドは、イベントハンドラーを要素にアタッチし、複数のイベントハンドラーを単一の要素に追加できます。 DOM要素とそのイベントリスナーのライフサイクルが同じでない場合、メモリリークが発生する可能性があります。