CSSセレクタがトータルで100倍速くなったからそろそろ終わり

JavaScript Selector DOM 
function _fakeMutationEvents(elm) {
  elm.style.behavior = "none";
  (function(n) {
    var fn = n.removeChild;
    n.removeChild = function(oldChild) { // DOMNodeRemoved
      uuClass.Selector.clearCache();
      return fn(oldChild);
    }
  })(elm);
  elm.attachEvent("onpropertychange", uuClass.Selector.clearCache); // DOMAttrModified
  uuClass.Selector.clearCache(); // DOMNodeInserted
}
window.onload = function() {
  document.createStyleSheet().cssText = "*{behavior:expression(_fakeMutationEvents(this))}";
}

上記のコードで、IEでも、DOM Mutation Events がエミュレートできました(やりたいことはやれた)。
ただし、onpropertychange でフックしているので、

  • 属性(+プロパティ)に対する書き込みは全て拾ってしまうため、独自プロパティでマーキングしている箇所などで問題発生(マーキングすると onpropertychange が fire してしまう)
    • IEの element.setAttribute("hoge", 1) は element.hoge = 1 のシンタックスシュガーなので…
      • element.className = "hoge" これで fire してもらえる分には助かるんだが
      • element.mark = 1 これで fire されちゃうと、すごく困る


という新たな壁が立ちふさがりました。

それらをクリアした結果、

  • IEでもキャッシュを安全に活用できるようになった
  • キャッシュONにすると8倍速くなった

となりました。
# この辺のノウハウには価値があると思うので、後日あらためて記事にします。

速度チェックするぜ

10/1に開始した高速化への取り組みもこれで終わりです。
当初は3161ms掛かっていたクエリーが、最新版なら32msで答えが出ます(in IE6)。
id:javascripterさんから指摘されたUNICODEへの対応も一応やっておいたのと、DocumentFragment内をクエリーできるようにもしたので、これでお残しはほぼありません。安心して、HTML5::Canvasの実装に戻れます。

あ、あと、peppy と sizzle の nth系にがっかりなバグがありました。
でも今日は気分がいいので全力で見逃すことにします。