JavaScript でよくあるメモリ リーク

1.グローバル変数

グローバル変数はアプリケーションの存続期間中存続し、ガベージ コレクションされることはほとんどありません。変数のスコープが適切に設定されていないと、偶発的なメモリ リークが発生する可能性があります。

function myFunc() {
    globalVar = "I'm a memory leak!";
}

2.切り離された DOM ノード

削除された DOM ノードは、JavaScript で参照される場合、表示されなくなった場合でもメモリ内に残ることがあります。

let element = document.getElementById("myElement");
document.body.removeChild(element); // Node removed but still referenced

3.タイマーとコールバック

setInterval と setTimeout はコールバックと変数への参照を保持するため、長時間実行されるアプリケーションでメモリ リークが発生する可能性があります。

let intervalId = setInterval(() => {
    console.log("Running indefinitely...");
}, 1000);

// Clear when no longer needed
clearInterval(intervalId);

4.クロージャ

クロージャは外部関数からの変数への参照を意図せず保持し、メモリの問題を引き起こす可能性があります。

function outer() {
    let bigData = new Array(100000).fill("data");
    return function inner() {
        console.log(bigData.length);
    };
}

ここでは、内部は、不要になった場合でも bigData を保持します。

メモリリークを防止および修正するための戦略?

1.グローバル変数を最小限に抑える

不必要なメモリの永続化を避けるために、変数にはローカル スコープ (関数またはブロック) を使用します。

2.切り離された DOM ノードへの参照をクリア

削除された DOM ノードを参照する変数が null に設定されていることを確認します。

document.body.removeChild(element);
element = null; // Clear the reference

3.タイマーとイベント リスナーを管理する

特に動的シングルページ アプリケーションの場合は、不要になったタイマーを常にクリアし、イベント リスナーを削除してください。

let timer = setInterval(doSomething, 1000);
// Clear when no longer needed
clearInterval(timer);

4.可能な限り大規模な閉鎖を避けてください

クロージャの範囲を最小限に抑えるか、コードを再構築して、大規模なデータ構造を不必要に保持しないようにします。

---

お役に立てば幸いです。読んでいただきありがとうございます。 ?
つながりましょう！私を見つけるには:

• 中: https://medium.com/@nhannguyendevjs/
• 開発: https://dev.to/nhannguyendevjs/
• Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
• X (旧 Twitter): https://twitter.com/nhannguyendevjs/
• コーヒーを買ってください: https://www.buymeacoffee.com/nhannguyendevjs

以上がJavaScript でよくあるメモリ リークの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。