まとめ ブログ ダウンロード 掲示板 メール

れぶろぐ

< 2008-06-18 (水) 2008-06-22 (日) > 最新


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);
    }
  },

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

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

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

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

このエントリの続き: 2008-07-28 (月)
Tags: JavaScript | このエントリを含む del.icio.us | このエントリを含むはてなブックマーク | このエントリを含む livedoor クリップ | Permalink
本日のリンク元

編集