jQueryつまみぐい

自己紹介

• 酒井一晃
• id:send http://d.hatena.ne.jp/send/
• 株式会社リンクシンク

jQueryとは

• 弊社マークアップエンジニアお勧めのJavaScriptライブラリ
  

jQueryとは

• メソッドチェーン
• 比較的高速
• DomContentLoaded
• 汚染が少ない
  • jQuery,$
  • noConflictモードだと任意の変数

$('#id')

• #id系を先に判別して、getElementByIdを使用
  • 今までは、全てfind()を使用していた
  • 使えない場合はfind()を使用する
  • IE,Operaのname属性問題
• 引数判別の正規表現のキャッシュと高速化
  • var quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#(\w+)$/;

$('elem')

• 正規表現のキャッシュと高速化

• var chars = jQuery.browser.safari
    && parseInt(jQuery.browser.version) < 417 ?
    "(?:[\\w*_-]|\\\\.)" :
    "(?:[\\w\u0128-\uFFFF*_-]|\\\\.)",
  quickChild = new RegExp("^[/>]\\s*(" + chars + "+)"),
  quickID = new RegExp(
    "^(" + chars + "+)(#)(" + chars + "+)"
    ),
  quickClass = new RegExp("^([#.]?)(" + chars + "*)");

.each()

.each()

• 一番良く使われる引数無しのパターンを高速化
  • 引数無しにapplyではなく、callを使用
  • 引数の数が固定でないと、callは汎用的に使えない
• applyよりcallの方が高速
  • 引数が固定
  • spidermonkeyで、1.5倍ぐらい速い

その他

• [].push.apply() とArray.prototype.push.apply()
  • Array.prototypeの方が少しだけ速い(spidermonkey)
• new Function()とeval("false||function(a,i){return " + fn + "}")
  • evalの方が少しだけ速い(spidermonkey)
• Browser毎に実装を切り分けて高速化

Performance Test

• 本家で公開されているやりかたが、お手軽で便利。

• <script src="./js/jquery-test.js"></script>
  <script>var jQTest = jQuery.noConflict(true);</script>
  <script src="./js/jquery-1.1.3.js"></script>
  

•   function time(name, fn){
      setTimeout(function(){
        var t = (new Date()).getTime();
        fn();
        var result = (new Date()).getTime() - t;
        document.getElementsByTagName("pre")[0]
          .innerHTML += name + ": " + result + "ms\n";
      }, 13);
    }

まとまってない

• 高速化としては、真っ当なやり方
  

おわりに

• 例えばTAKESAKOメソッドを避ける
  • TAKESAKOは特殊な訓練を受けています。
  • 真似しないで下さい＞＜
• jQuery1.2が12日にリリースされました！
  • このツールもjQuery1.2ベースだよ！
• LinkThinkでは優秀な人材を募集しています！
  • デザイナ
  • プログラマ
• ご清聴ありがとうございました