イベント登録とメモリリークについて(jQuery)

質問

下記のような【html】をjQueryのAjax関数とhtml()を利用した【処理フロー】で、動的にDOMに追加しているのですが、以下の【質問】にお答え頂けないでしょうか。
【html】
<div>
(省略)
<a href="javascript:void(0);" onclick="foo({'arg1':'str1','arg2':'str2','arg3':num3…});">テスト</a>
(省略)
</div>

※foo関数の引数は初期化配列を指定、引数値はサーバサイドで動的に変化させてクライアントに出力

【処理フロー】
a要素クリック→foo関数実行→jQueryのAjax関数でfoo関数引数の配列値をサーバに送信→レスポンスとして新たな【html】を受信して、jQueryのempty()、html()を使用して同じ要素配下を置き換え

※$.ajax({..., data:配列オブジェクト, ...}); のように、dataプロパティにfoo関数の引数をそのまま渡しています

【質問】
1.上記のonclickの内容が原因かどうかは分かっていませんが、繰り返しフローを走らせると、各ブラウザ(IE8,FireFox3.6,safari5,Opera11)でメモリリークが発生します。上記のonclickの関数に初期化配列という定義に問題はあるでしょうか。

2.foo関数の引数にある配列は、要素がクリックされたタイミングでオブジェクト化される認識であっていますでしょうか。また、上記のフローだと開放される(参照されなくなる)タイミングは、Ajax通信完了後という認識であっていますでしょうか。

3.Webで調査した範囲では、jQueryのempty()、html()はどちらも削除／置き換え前の要素に紐づいたイベントは削除されるようなのですが、上記のようにhtml()で追加する要素にonclickイベントを定義している場合も、次回empty()、html()で置き換え時にイベント削除されるでしょうか。

4.1に関連しますが、上記の内容、処理フローにおいて、置き換え前の要素セットやfoo関数の引数がメモリリークを引き起こす可能性はあるでしょうか。

どうぞよろしくお願いいたします。

回答No.2

神崎 渉瑠（@taloo）

私が最近確認したのはWindows版IE7、IE8、Firefox3.5、3.6、Safari3、5、Opera11ですが、
昔確認したのを入れると、IE6、Firefox1.5、2.0、3.0、Opera8.0.2、9.5、9.6、10.0です。

上記全てのブラウザ・バージョンで、メモリが解放されるタイミング（ガーベッジコレクション実行）は、「URI変更時」です。
（そういえば、location.hrefではチェックしましたが、location.replaceではチェックしていません。）

フルAjaxサイトではガーベッジコレクション実行されませんから、自分でメモリを解放するための仕組みを付ける必要があります。
AmazonやYahoo、GoogleくらいのAjaxの使い方なら、頻繁にURI変更が行われるので、気にするレベルではない（ガーベッジコレクションに任せても大丈夫）と思います。

>1.上記のonclickの内容が原因かどうかは分かっていませんが、繰り返しフローを走らせると、各ブラウザ(IE8,FireFox3.6,safari5,Opera11)でメモリリークが発生します。上記のonclickの関数に初期化配列という定義に問題はあるでしょうか。

初期化配列というのが何なのかわかりませんが、
element.onclick=function(){};
でイベントハンドラを指定している場合、innerHTMLやDOMの.removeChild()や.replaceChild()で置き換えた場合は、
あらかじめelement.onclick=null;または.removeEventListener()などでハンドラを除去する必要があります。

foo関数を呼び出したときではなく、
>jQueryのempty()、html()を使用して同じ要素配下を置き換え
この処理の時にメモリリークが発生していると考えた方が自然だと思います。

頻繁にURIを変更するのであれば、多少のメモリリークは（ガーベッジコレクションで直るので）無視して大丈夫だと思います。

>2.foo関数の引数にある配列は、要素がクリックされたタイミングでオブジェクト化される認識であっていますでしょうか。

合っています。

>また、上記のフローだと開放される(参照されなくなる)タイミングは、Ajax通信完了後という認識であっていますでしょうか。

foo関数の引数の分は、関数を抜けたタイミングで解放されます。
ただし、関数から別の関数を呼び出すときに引数として使用した物が、参照渡し（String、Number以外）になっている場合は、ガーベッジコレクションを待つことがあるようです。
（私が調べた中では、メモリリークを起こす詳しい条件が不明。新しいブラウザほどリークしなくなっているようです。）

これは「クロージャ」が関係しているようです。

delete object;またはobject=null;を行っておけばメモリは解放されます。

Ajax通信に使用した変数（XHRオブジェクトに通信データとして渡した物）は、XHRオブジェクトを削除するか、ガーベッジコレクションが働くまでメモリ内に残るようです。
そのため、XHRオブジェクトの削除をガーベッジコレクションに任せている場合は、
URIを移動しない限りメモリを消費し続けるようです。
ですが、XHRオブジェクトを使い回しするような場合などでは、
2回目移行の通信では「それ以上メモリを消費しない」という意味で、メモリは解放されなくてもメモリリークしていないと（私は）考えます。
（グローバル変数がメモリを解放されないのと同じ）

>3.Webで調査した範囲では、jQueryのempty()、html()はどちらも削除／置き換え前の要素に紐づいたイベントは削除されるようなのですが、上記のようにhtml()で追加する要素にonclickイベントを定義している場合も、次回empty()、html()で置き換え時にイベント削除されるでしょうか。

わかりません。
私が確認した中では、jQueryだけでHTMLを書き換えた方法では、完全にメモリリークを抑えられませんでした。
もちろん、私のjQueryの使い方が間違っている可能性もあります。

お礼

詳細な情報をありがとうございます、大変助かります。

○ガベージコレクションについて
タイミングについて知りませんでした。今回ほぼ、フルAjaxサイトを構築しているため、必要だと思われる箇所でガベージコレクション任せで変数にnullをいれていたのですが、URI変更しないとなるときっとダメなのですね。deleteその他、メモリ解放の手段を調べてみます。

○ハンドラ除去について
innerHTMLや.removeChild()ではあらかじめ除去ということは認識していたのですが、jQueryのhtml()を使用する場合は、innerHTMLなどと同じ処理が行われるのかjQueryのbind()を経由してイベント登録されるのか、といったところが分からずにいました。
もし後者であれば、仕様を見る限りempty()、html()などで一括除去してくれるものだと安易に考えていましたが、追加されるhtmlの内容を解析してbind()まではjQueryもしていないように思い改めました。一応jQueryのソースを調べみますが、ご教示頂いた方法で除去することにします。

○メモリリークについて
メモリリークを起こす条件が私も分からないのです。新しいブラウザほど、というのもこちらで確認済みです。
参照渡しになっているものが多いため、おそらく前述でおっしゃっていたURI変更をしていないためガベージコレクションが働いていなかったことも原因の1つだと思います。ただ、参照渡しの変数全て処理フロー最後にnullをいれた状態で、時々URI変更する操作を行っていたこともありますが、それでもリークしていったため、今回は別の問題も含んでいると思っています。クロージャ含めコードを見直してみます。

○XHRオブジェクトについて
そうなのですね、ここが一番調査余地がありそうです。XHRオブジェクトの使いまわしはしておりませんし、DOMの大部分を置き換えるような通信をした場合に2,3MB単位でメモリ使用量が増えることが多々あるため、受信したデータがメモリ上に溜まっていってるのかもしれません。

ご回答頂いて気付いた点を中心に引き続き調べてみます。
私の知識が不足し過ぎているようでお手数をおかけします。

回答No.1

gorusura

http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/
asyncをfalseにして、同期通信にしては如何でしょうか？
通信中は何もできませんが、通信中にクリックされることを防ぐことが出来ます。

お礼

今回は非同期が必須ですが、問題の切り分けになるかもしれませんので、同期の状態でも調べてみます。ご回答ありがとうございます。