JS 昇格におけるガベージコレクションメカニズムと一般的なメモリリークの問題を解決する方法-jsチュートリアル-php.cn

この記事では、主に JS のガベージコレクションメカニズムと一般的なメモリリークの問題を解決する方法を紹介します。必要な友人に参考にしていただけるように共有します。クロージャのメモリリークの仕組みを理解したいと思ったときに、「JS上級プログラミング」のガベージコレクションの仕組みの解析を思い出しました。前はよく理解できませんでしたが、1年後に見返すと理解できるようになります。 , なので皆さんにもシェアしたくて書きました。気に入ったら、いいね/フォローしてサポートしてください。

メモリのライフサイクル:

必要なメモリを割り当てます:

文字列、オブジェクトなどのサイズは固定されていないため、JS プログラムが文字列またはオブジェクトを作成するたびに、プログラムは
そのエンティティを保存するためにメモリを割り当てます

割り当てられたメモリを使用して何かを実行します。

不要になったら解放して返す:
文字列とオブジェクトが不要になったら、それらが占有しているメモリを解放する必要があります。解放しないと、システム内の利用可能なメモリがすべて消費され、システムがクラッシュします。 . これが
ガベージコレクションメカニズム

いわゆるメモリリークとは、 を指します。過失またはエラーにより、プログラムが使用されなくなったメモリの解放に失敗し、メモリが無駄に消費されることです。

ガベージコレクションメカニズム:

C や C++ などの言語では、メモリを手動で管理する必要があり、これは多くの不必要な問題の原因でもあります。幸いなことに、js を記述するプロセスでは、メモリの割り当てとメモリのリサイクルは完全に自動的に管理されるため、この種のことを心配する必要はありません。

ガベージコレクションメカニズムの原理:

ガベージコレクターは、一定の時間間隔で定期的に使用されなくなった変数を見つけて、

それらが占有しているメモリを解放します

。

使用されなくなった変数とは何ですか?

使用されなくなった変数は、関数の実行中にのみ存在し、他の参照 (クロージャ) が存在しない変数です。リサイクルとマークされます。グローバル変数のライフサイクルは、ブラウザがページをアンロードするまで終了しません。つまり、

グローバル変数はガベージコレクションとして扱われません

。

マークスイープ:現在採用されているガベージコレクション戦略動作原理:

変数が環境に入るとき(関数内での変数の宣言など)、変数が離れるときに、その変数は「環境に入る」としてマークされます。環境を選択し、「環境を離れる」としてマークします。「環境から離れる」とマークされている場合、メモリは再利用されます。

ワークフロー:

ガベージコレクターは、操作中にメモリに保存されている

すべての変数をマークします。

環境内の変数
と、環境内の変数によって参照される変数のタグを削除します。
まだタグが付いている変数は、削除できる
変数とみなされます。
最後に、ガベージコレクターはメモリクリアの最後のステップを実行し、マークされた値を破棄し、それらが占有しているメモリ領域を再利用します
。
2008 年現在、IE、Chrome、Fireofx、Safari、Opera はすべてマークアンドスイープガベージコレクション戦略を使用しています
が、ガベージコレクションの間隔は異なります。

参照カウントの略語: 放棄されたガベージコレクション戦略

循環参照: 各値の参照を追跡および記録するテクノロジー

古いバージョンのブラウザ (はい、また IE) では、IE9 より下の BOM および DOM オブジェクトは、 C++ を使用した COM オブジェクトの形式。

COM のガベージコレクションメカニズムは参照カウント戦略を使用します。このメカニズムは循環参照が発生したときにメモリを解放できません。

    var element = document.getElementById('something');
    var myObject = new Object();
    myObject.element = element; // element属性指向dom
    element.someThing = myObject; // someThing回指myObject 出现循环引用(两个对象一直互相包含 一直存在计数)。

ログイン後にコピー

解決策は、リンクを使用しないときに手動でリンクを切断することです:

     myObject.element = null; 
     element.someThing = null;

ログイン後にコピー

排除

IE9 は、BOM および DOM オブジェクトを実際の JS オブジェクトに変換し、このガベージコレクション戦略の使用を回避します。 IE9 以下でよくあるメモリリークの主な原因。

IE7 には悪名高いパフォーマンスの問題があります。見てみましょう:

256 個の変数、4096 個のオブジェクト (または配列) リテラル、または 64KB の文字列、いずれかの重要な値に達すると、ガベージコレクターが実行されます。

js スクリプトのライフサイクルで非常に多くの変数が保持される場合、ガベージコレクターが頻繁に実行され続け、深刻なパフォーマンスの問題が発生します。
IE7 ではこの問題が修正されました。

ガベージコレクションメカニズムはありますが、コードを記述するときに依然としてメモリリークが発生する状況があります。これらの状況を理解し、プログラムを作成する際にそれを回避するように注意すれば、プログラムはより堅牢になります。

予期しないグローバル変数:

グローバル変数はガベージコレクションとして扱われないと上で述べました

コーディング中に時々次のような状況に遭遇します:

。

    function foo() {
     this.bar2 = '默认绑定this指向全局' // 全局变量=> window.bar2
      bar = '全局变量'; // 没有声明变量 实际上是全局变量=>window.bar
    }
    foo();

ログイン後にコピー

当我们使用默认绑定，this会指向全局，this.something也会创建一个全局变量，这一点可能很多人没有注意到。

解决方法：在函数内使用严格模式or细心一点

    function foo() {
      "use strict"; 
      this.bar2 = "严格模式下this指向undefined"; 
      bar = "报错";
    }
    foo();

ログイン後にコピー

当然我们也可以手动释放全局变量的内存：

    window.bar = undefined
    delete window.bar2

ログイン後にコピー

被遗忘的定时器和回调函数

当不需要setInterval或者setTimeout时，定时器没有被clear，定时器的回调函数以及内部依赖的变量都不能被回收，造成内存泄漏。

var someResource = getData();
setInterval(function() {
    var node = document.getElementById('Node');
    if(node) {
        node.innerHTML = JSON.stringify(someResource));
        // 定时器也没有清除
    }
    // node、someResource 存储了大量数据 无法回收
}, 1000);

ログイン後にコピー

解决方法：在定时器完成工作的时候，手动清除定时器。

闭包：

闭包可以维持函数内局部变量，使其得不到释放，造成内存泄漏。

    function bindEvent() {
      var obj = document.createElement("XXX");
      var unused = function () {
          console.log(obj,'闭包内引用obj obj不会被释放');
      };
      // obj = null;
    }

ログイン後にコピー

解决方法：手动解除引用，obj = null。

循环引用问题

就是IE9以下的循环引用问题，上文讲过了。

没有清理DOM元素引用：

    var refA = document.getElementById('refA');
    document.body.removeChild(refA); // dom删除了
    console.log(refA, "refA");  // 但是还存在引用 能console出整个p 没有被回收

ログイン後にコピー

不信的话，可以看下这个dom。

解决办法：refA = null;