hagino3000's blog

平成アーカイブス (更新停止)

IEでメモリリークしてる箇所を検出しまくる方法

JavaScript Memory Leak Detectorのver. 2が出てたのでリンク修正

前から気になっていたツールを実際に使ってみたのでメモ。

 javascriptメモリリークしている箇所の検出はJavaScript Memory Leak DetectorIEの使用メモリのチェックはProcess Explorerを使う。インストールはそれぞれ次のリンクを参照。どちらもwindowsの再起動はいらないって書いてあるけど、私は再起動しないと使えませんでした。

メモリリークの原因になっているコードを検出する

 上記JavaScript Memory Leak Detectorのツールバーを表示したまま、チェックしたいwebページを操作して画面遷移していけばOK。この時の動作モードが3つあります。

  • IE6
  • IE7
  • Actual leaks

IE6/IE7:
look for circular references. If some DOM object is (a) maintained alive by a reference from the Jscript engine and (b) maintains a reference to one (or more) Jscript objects, then this DOM object could be leaked.


We cannot be sure, since Internet Explorer will try to break circular references and IE7 is quite successful in doing this. So, our heuristic will distinguish the cases based on the version of Internet Explorer, giving us the first two settings options:

* IE6: where all circular references are considered leaks
* IE7: where only the DOM objects detached by the markup at "closing" time could be leaked


Actual leaks:
look for leaked DOM elements. If some DOM object has a positive ref count after the page has been completely unloaded, then it is probably leaked. (But even in this case, we cannot be definitely sure, as IE could still keep a reference to the object for some reason and release it later).

GPDE Team Blog : JavaScript Memory Leak Detector

 IE6モードだと、循環参照になってる所全部、IE7モードだと画面のunload時にDOMツリーから削除されている循環参照要素がある所、Actual leaksモードは画面のunload後にも参照が残っている所が検出される。
こんなコードがあると検出されます。

var link = document.createElement('a');
link.onclick = function(){
  doSomething...
}

ちなみにメモリリークサインはわずかにスクリプト名が赤くなるだけで、見落としやすい。赤くなっている箇所を展開しないと黄色い三角マークが出てこないので。

メモリリークしてるかチェック

 上記手順で検出したら、実際にメモリリークしてるかチェック。JavaScript Memory Leak Detector を一旦閉じてIEを終了させる(それ自体が際限なくメモリを消費していくので)。IEを再起動してProcess ExplorerIEのプロセスの詳細(Performance Graphタブ)を表示したまま、検出されたコードが通過するような操作を行い画面遷移(画面をunload)を繰り返す。
メモリリークが発生していると、同じ操作の繰り返しで使用メモリが増えて行く。
コード修正後も同様に、メモリリークが直っているか確認する。

同じ画面遷移の繰り返しでメモリ使用量が増えている図


簡単ですね

これなら自分で書いてないコードをチェックするのも楽ですねー