れぶろぐ

2008-06-20 (金)

■ innerHTML がメモリリークを引き起こす例

先日悩んでいたメモリリークの原因が判明しました。 Ajax とは無関係で、innerHTML を使って書き換えていたのが良くなかったみたいです。メモリリークを起こしていたのは、こういうコードの箇所です。（本当は <ul>～</ul> の部分は Ajax で読み込んだテキストが入ります。）

  toggle: function(event) {
    var element = event ? event.target : window.event.srcElement;

    if (element.nodeName == "LI") {
      element.innerHTML += "<ul><li>dummy</li></ul>";
    }
  },

これを、次のように createElement と appendChild を使って書き換えると、メモリリークを回避できました。

  toggle: function(event) {
    var element = event ? event.target : window.event.srcElement;

    if (element.nodeName == "LI") {
      var ul = document.createElement("ul");
      ul.innerHTML = "<li>dummy</li>";
      element.appendChild(ul);
    }
  },

クロージャや循環参照が原因となるパターンとは違うと思うので、なぜメモリリークになっていたのか、よく分からないのですが、

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

このページで解説されている「クロスページリーク」に該当するのかもしれません。でも、さらに試してみると、最初のコードをもっと単純に、

      ......
      element.innerHTML = "dummy";
      ......

のようにしてもメモリリークするようです。やっぱりよく分かりません。

このエントリの続き: 2008-07-28 (月)

Tags: JavaScript |

| Permalink

[コメントを書く]

コメントがあればどうぞ! E-mailアドレスは公開されません。

本日のリンク元

編集


		2008年 6月
日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

2008-06-20 (金)

■ innerHTML がメモリリークを引き起こす例

カレンダー

過去の日記

ブログ内検索

タグクラウド

最近の記事