Canvas使用時のJavaScriptメモリ消費量の解析

canvasを使用していると思わぬjavascriptのheapに遭遇することがあるが、
原因をつかむのが難しい。。

調べてみるとGoogleChromeの機能でメモリ解析機能があるとのことで試してみる。
（参考）Chromeの知られざる開発者向け機能 - JavaScriptメモリ消費量の解析
http://news.mynavi.jp/articles/2011/05/31/chrome/index.html

GoogleChrome->ディベロッパーツール->Profiles->TakeHeapSnapShot->Start

スタートをクリックするとその時点でのヒープのスナップショットが取得され、
使用状況を関数単位で表示してくれる。

開始時点と数分後を比較すると一目瞭然で、時間に比例してArrayやclosure、Object
のRetailnedSizeが上昇していくことが分る

出力結果を参照して、イベントを調べていくとクロージャーやループイベントで頻発。
イベントハンドラの設定時にクロージャで循環参照するのが原因ぽいことが判明。
クロージャでスコープが複雑に関わってくるときメモリリークは多発するとの話題が色々なブログで掲載されていた。
※クロージャ周りのメモリリークはIE7/Fx2では修正されてるとも書かれているが。

で、解決方法として下記を散々読んだ挙句、２つ対策を実施。
（参考）クロージャとメモリリークについてのコピペ
http://d.hatena.ne.jp/lesamoureuses/20080416/1208325055

1.クロージャに取り込む変数に最後null代入する(参A)

2.addEventListenerを使用した後はremoveEventListenerする

(参A)

function test() {
  var elt = document.getElementById('i0');
  elt.src = 't2.png';
  elt.onclick = function() { location.href = 't2.html'; }
}

function test() {
  var elt = document.getElementById('i0');
  elt.src = 't2.png';
  elt.onclick = function() { location.href = 't2.html'; }
  elt = null;
}