最近prototype.jsではSelectorとDOMがよく動きます。 仕事でも使っているし、重要な部分なのでここのところウォッチしています。

最近、実は書こうと思ってたElement.extendの問題が解決されました。 問題:Incredible memory leak in IE

これは見る人が見ればパッと見で「これはヤバいんじゃね?」と思ったんじゃないでしょうか。 わからなかった人は上記のURLにも載っている http://msdn.microsoft.com/library/default.asp?url=/library/en-us/ietechcol/dnwebgen/ie_leak_patterns.asp を見ておくと今後悩むことが減るかもしれません。

リンク先をみたらなにが問題かわかるのであえては書きません。

もう一個、興味深いのは Element.extend cripples $() performance での議論です。 前に書いた記事 と似た主張や議論がなされています。うちの会社にも英語苦手な人がいるので簡単に要旨を。

  • Element.extendはパフォーマンスに問題がある。前のままにしてほしい。

    • http://dev.rubyonrails.org/changeset/4094 でだいぶマシになっているよ?
    • 解説:以前はそれぞれのElementについてElement.Methodsのメソッドにelementをbindしてコピーしていた。つまりElementの数に比例してメモリを使用する。しかし4094でキャッシュを導入したので一定数のメソッドしか生成しない。
    • とりあえずElement.extendのパフォーマンスをあげることにフォーカスしよう。
    • Element.extend = Prototype.Kってかけばとりあえず大丈夫じゃね?

      • でもscriptaculousが完全にextendされてる前提でコードかいてるから動かなくなるじゃん。
      • 解説:scriptaculousは3月28日にprototype.js 1.5_pre1をバンドルしてバージョン1.6をリリースした。このバージョンではelement.setStyle({top: “})とかelement.show();みたいにガンガンElement.extendを活用している。まぁとりあえずElement.extendが必要ないときはPrototype.Kにしとけばいい。
    • FirefoxやSafariは高速化できる(前のエントリーとほぼ同じ)。しかしprototype.jsに組み込むとscriptaculousのElement.Methods拡張が反映されない。

というわけでElement.extendはこれでちょっと落ち着いた感じ。個人的にはElement.extend無効化して使っていきたいなーって思ってたりしてたんですけどscriptaculousがやっぱりガンガン使ってきたので、まぁ様子見てみます。


以前のエントリー でprototype.js1.5のElement.Methodsについて書きました。 前回はいいところをプッシュして書いたんですが、皆さんご存じの通り問題児でもあります。

Element.Methodsの問題点

  • elementを拡張するかしないかが選択できない。
  • プロトタイプチェーンがつながっていない。
  • document.createElementが考慮されていない。

■elementを拡張するかしないかが選択できない。

まずわかりやすくこれから。elementは取得された時に拡張されるわけですが、当然パフォーマンスに影響があります。使いたくない人もいるでしょう。しかし、Element.extendによる拡張は$にも$$にも組み込まれていて選択できません。メソッドを置き換えて回避は可能ですが、組み込まれている、ということを考慮すると当然extendされている、ということを前提としたライブラリも出てくるでしょう。となった場合にやっかいです。別名のメソッドを定義してもいいですが・・・やっぱり$って名前がいいよね!(何

■プロトタイプチェーンがつながっていない。

これは当然の問題。Element.extendは文字通りelementにElement.Methodsのメソッドをコピーしているだけ。しかも一回取得すると、_extendedというフラグが立って次回からはもうextendされない(パフォーマンスを考慮してのこと)。つまり Element.Methodsへのメソッド追加が反映されない、メソッドの内容変更も反映されない。  つまり、恐らく$か$$されるだろう、window.onloadイベント前にElement.Methodsへのメソッド追加を完了させ、それ以降変化させない、という事に注意しないといけない。

ではなぜプロトタイプチェーンがつながっていないのだろうか。Elementは拡張できないんだろうか。これはYesでありNoです。 まず、このElement.Methodsによる害をある程度押さえ込むことのできるソースを示します。 これはFirefoxなどMozilla系、safari、Operaで有効です。

(function() {
if(!window.HTMLElement) window.HTMLElement = document.createElement("xxx").constructor;
if(window.HTMLElement) {
    var methods = Element.Methods, property;
    var bind = function(name, method) {
      HTMLElement.prototype[name] = function(){
        Array.prototype.unshift.call(arguments, this);
        return method.apply(null, arguments) || this;
      }
    }
    for (property in methods) {
      var value = methods[property];
      if (typeof value == 'function') bind(property, value);
    }
    HTMLElement.prototype._extended = true;
}

})();

このコードを 最後に(window.onloadの直前で)実行すれば OKです(scriptaculousとかもElement.Methodsを拡張するので、その拡張が終わった後)。 これでelementがプロトタイプチェーンでつながっているブラウザでは$による負荷を軽減できます。$(“test”).show()とかも実行できますし、引数操作によるパフォーマンス低下がいやならElement.show(“test”)と実行すれば良いだけです。しかも地味にreturn method.apply(null, arguments) || this;とすることによって$(“test”).update(“hogehoge”).show()とか書けるようにもしてみました(笑

しかしIEはどうしようもありません。 そもそもIEはelementがプロトタイプチェーンをもっていません。 document.createElement (“div”).constructorとやってもprototypeとやってもundefinedと抜かす強敵です。これは昔から対策が考えられていますが、つまるところElement.Methodsと同様にコピーするだけです。それをhtcをつかってみたり、コンストラクタを擬似的に作ってみたり、とかっていう方法で実装しているだけです。なのでElement prototypingしようと思うとIEでは現状これが限界です。

■ document.createElementが考慮されていない。

先ほど示したソースでelementがプロトタイプチェーンをもつブラウザでは当然document.createElementで作成した elementもElement.Methodsのメソッドが実行できます。しかしIEではそれができません。この document.createElementも考慮して先ほどのElement.Methods対策ソースを改良しましょう。

(function() {
if(!window.HTMLElement) window.HTMLElement = document.createElement("xxx").constructor;
if(window.HTMLElement) {
    var methods = Element.Methods, property;
    var bind = function(name, method) {
      HTMLElement.prototype[name] = function(){
        Array.prototype.unshift.call(arguments, this);
        return method.apply(null, arguments) || this;
      }
    }
    for (property in methods) {
      var value = methods[property];
      if (typeof value == 'function') bind(property, value);
    }
    HTMLElement.prototype._extended = true;
}else {
  document._createElement = document.createElement;
  document.createElement = function(tag){
    return Element.extend(document._createElement(tag));
  }
}

})();

赤色で示した部分が追加部分です。これでIEでもdocument.createElementした後に直接Element.Methodsのメソッドが実行できます。何度も言いますがパフォーマンス低下がいやな人はこの追加部分を省いてください。

というわけで今回はElement.Methodsの問題への対応策を示してみました。要はIEがelementがプロトタイプチェーンを持つようにしてくれれば万事解決なわけなんですよね。でも結局IE7でも実装されていないようで、なかなか・・・


prototype.js1.5ではみんながこうしたいなーと思っていた機能が実装されました。(via Encytemedia ) (SVN co http://dev.rubyonrails.org/svn/rails/spinoffs/prototype して rake distしたもの )

■Element.Methods

1.4まではelementに対する操作は

Element.show($("test"));
Element.update($("test"), "hoge");

のように書く必要がありました。

これが

$("test").show();
$("test").update("hoge");

と書けるようになりました。

これはprototype.jsで最も偉大な$メソッドの変更によるモノです。

function $() {
  var results = [], element;
  for (var i = 0; i < arguments.length; i++) {
    element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);
    results.push(Element.extend(element)); //<= ココ!
  }
  return results.length < 2 ? results[0] : results;
}

つまり取得したelementに対してElement.extendが適応されるようになった、と。 んでそのElement.extendは

Element.extend = function(element) {
  if (!element) return;

  if (!element._extended && element.tagName && element != window) {
    var methods = Element.Methods;
    for (property in methods) {
      var value = methods[property];
      if (typeof value == 'function')
        element[property] = value.bind(null, element);
    }
  }
  element._extended = true;
  return element;
}

Element.Methodsのメソッドがelementに対して第1引数をそのelementに束縛した状態でセットされます。 つまりElement.Methodsにメソッドを追加すれば自動的に$で取得したelementに対してそのメソッドが追加されます。

ちなみにscriptaculousでも

if(Element.Methods) {
  Element.Methods.visualEffect = function(element, effect, options) {
    s = effect.gsub(/_/, '-').camelize();
    effect_class = s.charAt(0).toUpperCase() + s.substring(1);
    new Effect[effect_class](element, options);
    return $(element);
  }
}

というコードが追加されています。 クラス名変換のオーバーヘッドはあるものの、$(“test”).visualEffect(‘scale’)と書けるようになりました。

IEで$$が動くようになっていたりと1.5のリリースが待ち遠しいですね。