Javascript メモリリーク

2021-08-032021
58.7% (214.4/365)
August
7.7% (2.4/31)
Week 31
20% (1.4/7)
Day 03 Tue
40.5% (9.7/24)

訪問者

total: 8809
today: 1
yesterday: 2
now: 14

↑

更新

MenuBar

Internet Explorer リークパターンを理解して解決する、MSDN、2005
メモリーリークに関する覚え書き、babu_babu_babooのごみ箱、2010
クロージャとメモリリークについてのコピペ、JavaScriptとかPerlとかPHPとかさくらVPSとか勉強する、2008
IE9のevalでメモリリーク、やねうらお、2012

Internet Explorer リークパターンを理解して解決する、MSDN、2005 †

http://msdn.microsoft.com/ja-jp/library/bb250448(v=vs.85).aspx
循環参照
- 概要
  - ブラウザでは DOM オブジェクトと Javascript オブジェクトの管理方法が違う
  - DOM と Script が参照し合って循環になっていると、ブラウザはオブジェクトを解放できない
```
obj.output → DIV , DIV.onclick() → obj2, obj2.elem[2] → obj
```
    とかなっていると、ブラウザは循環参照を検知できず、Object を解放できない
- 対策
  - 不用意に参照関係を作らない
  - 不要になったイベントハンドラをデタッチする
クロージャー
- 概要
  - クロージャーは、それが定義されている function 内の Object の参照を保持する (使って無くても!!) ので、意図せずに循環参照を起こしてしまうことがある
```
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var global = "G";

function test(arg) {
  var local = "L";
  
  var btn2 = document.getElementById('btn2');
  btn2.onclick = function() {
    console.log('I know global is ' + global + ".");
    console.log('I know arg is ' + arg + ".");
    console.log('I know local is ' + local + ".");
    console.log('I know btn2 is ' + btn2 + ".");
  };
}
</script>
</head>
<body>
<button type="button" id="btn1" onclick="test('A')">BTN1</button>
<button type="button" id="btn2">BTN2</button>

</body>
</html>
```
  - クロージャーは、グローバルスコープの変数への参照も function スコープの参照も保持している。function スコープの変数を通じて DOM → Script → DOM の循環参照が起きる可能性がある
  - 上の例では BTN1 を呼び出すごとに新たにクロージャーが作られる。古いクロージャも参照を保持している。
- 対策
  - 不必要にクロージャーを使わない。イベントハンドラには、普通の function を使う

クロスページリーク

概要
- document に接続されていない DOM オブジェクトを作ると一時スコープが作られて、ページが遷移しても回収されない恐れがある

対策

BAD

1. どこにも所属していない SPAN 作成
2. どこにも所属していない TEXTAREA 作成
3. どこにも所属していない DIV 作成
4. DIV に SPAN を追加
5. DIV に TEXTAREA を追加
6. document に DIV を追加

GOOD

1. document に DIV を追加
2. DIV に SPAN を追加
3. DIV に TEXTAREA を追加

疑似リーク
- 概要
  - ページの内容を書き換えても参照が残っていたらメモリはクリアされない
- 対策
  - 参照関係に注意。不要になったイベントハンドラのデタッチ。
  - クロスページリークでないことを確認せよ。クロスページリークで無ければページ遷移でメモリが解放されるので、無視できれば無視しても良い