jsのメモリリーク_javascriptスキルのいくつかの状況に関する詳細な説明

メモリ リークとは、ブラウザのプロセスが終了するまで、割り当てられたメモリを使用またはリサイクルできないことを意味します。 C では、メモリが手動で管理されるため、メモリ リークがよく発生します。現在、C# や Java などの人気のある言語は、自動ガベージ コレクション方式を使用してメモリを管理しており、通常の使用ではメモリ リークはほとんど発生しません。ブラウザも自動ガベージ コレクションを使用してメモリを管理しますが、ブラウザのガベージ コレクション方法のバグにより、メモリ リークが発生する可能性があります。

1. ページ内の要素が削除または置換される場合、その要素にバインドされているイベントが削除されていない場合、IE はそのイベントを最初に手動で削除する必要があります。そうしないと、メモリ リークが発生します。

コードをコピー コードは次のとおりです:

コードをコピーします

コードは次のとおりです:

>

イベント委任




コードをコピー

コードは次のとおりです:

document.onclick = function(event){

event = event ||

if(event.target.id == "myBtn"){
document.getElementById("myDiv") ").innerHTML = "処理中...";
}
}



2.




コードをコピーします

コードは次のとおりです:

var a=document.getElementById("#xx"); var b=document .getElementById("#xxx"); a.r=b b.r=a;

コードは次のとおりです。

var a=document.getElementById("#xx");

a.r=a;純粋な ECMAScript オブジェクトは、他のオブジェクトがオブジェクト a と b を参照していない限り、オブジェクト a と b も同様です。つまり、これらは単なる相互参照であり、ガベージ コレクション システムによって引き続き認識され、処理されます。ただし、Internet Explorer では、循環参照内のオブジェクトのいずれかが DOM ノードまたは ActiveX オブジェクトである場合、ガベージ コレクション システムは、それらの間の循環関係がシステム内の他のオブジェクトから分離されていることを検出せず、それらを解放します。最終的には、ブラウザが閉じるまでメモリ内に保持されます。 3. コードをコピーします。

コードは次のとおりです。

var elem = document .getElementById( 'test');
elem.addEventListener('click', function() {
alert('あなたは ' elem.tagName をクリックしました);
}); 🎜>これ このコードは、DOM ノードのクリック イベント処理関数として匿名関数を登録し、関数内で DOM オブジェクトの要素を参照し、クロージャを形成します。これにより、循環参照が生成されます。つまり、DOM-> Closure->DOM-> Closure... DOM オブジェクトは、クロージャが解放されるまで解放されず、クロージャは DOM のイベント処理関数として機能します。オブジェクトが存在するため、DOM オブジェクトが解放される前にクロージャは解放されません。DOM ツリー内で DOM オブジェクトが削除されても、この循環参照が存在するため、DOM オブジェクトもクロージャも解放されません。このメモリ リークを回避するには、次の方法を使用できます。

コードをコピーします

コードは次のとおりです:

var elem = document.getElementById('test');
elem.addEventListener('click', function() {
alert('You clicked ' this.tagName); // いいえ次に、elem 変数を直接参照します
});

コード をコピーします。コードは次のとおりです。 function bindingEvent()

{

var obj=document.createElement("XXX");
obj.onclick=function(){
//空の関数であっても
}
}


クロージャは循環参照を簡単に形成できます。クロージャーを形成する関数オブジェクトが、たとえば DOM ノードのイベント ハンドラーに割り当てられ、そのノードへの参照が関数オブジェクトのスコープ内のアクティブな (または変更可能な) オブジェクトに割り当てられている場合、Circular が存在します。参考文献。
DOM_Node.onevent -
このような循環参照を作成するのは簡単で、同様の循環参照コード (通常は Web サイトのすべてのページにあります) を含む Web サイトを簡単に閲覧するだけでも、大量 (またはすべて) のデータを消費する可能性があります。システムのメモリ。
解決策は、イベント処理関数を外部で定義し、クロージャを解放することです

コードをコピーします コードは次のとおりです。 function bindingEvent()

{

var obj=document.createElement("XXX");
obj.onclick=onclickHandler;
function onclickHandler; (){
//do something
}


または、イベント処理関数を定義する外部関数内の dom への参照を削除します (「決定版」で紹介されているように、トピックとは関係ありません) JavaScript ガイド」、閉じる パッケージでは、スコープ内の未使用の属性を削除してメモリ消費量を削減できます。)

コードをコピー

コードは次のとおりです。 function bindingEvent() {

var obj=document.createElement("XXX");

obj.onclick=function(){
//空の関数であっても
}
obj=null;
}




コードをコピーします

コードは次のとおりです:

a = {p: {x: 1}}; a.p; このコードを実行した後、b.x の値は 1 のままです。削除された属性参照がまだ存在するため、JavaScript の一部の実装では、この緩いコードが原因でメモリ リークが発生する可能性があります。したがって、オブジェクトを破棄するときは、プロパティをたどって 1 つずつ削除する必要があります。 6. 自動型ボックス変換

信じないでください。次のコードは IE シリーズでメモリ リークを引き起こします

コードをコピーします

コードは次のとおりです:

var s="lalala"; alert(s.length); s 自体は文字列です。 object ではなく length 属性がないため、 length にアクセスすると、JS エンジンは をカプセル化する一時 String オブジェクトを自動的に作成し、このオブジェクトは確実にリークされます。このバグは驚くべきものですが、幸いなことに、操作を実行する前にすべての値の型を明示的に変換することを忘れないでください。

コードをコピー

コードは次のとおりです:

var s="lalala";

alert(new String(s).length); 7.操作IE シリーズ特有の問題は、DOM ツリー上にない DOM 要素に単純に appendChild を実行することです。IE7 では、メモリ リークを改善するために、DOM 上のすべての要素をリサイクルするという極端な解決策を採用しているようです。ページを離れるときは、他のことは気にしないでください。