photoBy: http://www.jose-aguilar.com/blog/wp-content/uploa…

まずは jquery 1.x と 2.x の違い

• 1.x 系は IE8 以前をサポートするが遅い、重い
• 2.x 系は IE8 以前のサポートは捨てて、いるが軽い、早い

アイル トン・セナじゃあるまいしそんなに早くしてどうすんの？

Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。

使い分ける

対応していないIE8以下には古いjqueryを読み込ませます

<!--[if lt IE 9]>
    <script src="jquery-1.9.1.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-2.0.0.js"></script>
    <script src="js/jquery-migrate-1.2.1.min.js"></script>
<!--<![endif]-->

migrate を読み込んでおけば、古いjqueryでしか動かないプラグインなどを動くようにしてくれる
（但し、プラグインによっては動かない。）

動かないプラグインはどうするん？

<script type=”text/javascript” src=”jquery-1.9.0.js”></script>
<script type=”text/javascript” src=”jquery-1.3.2.js”></script>
<script type=”text/javascript”>
var $ = jQuery = jQuery.noConflict().extend(true, $);
</script>

この方法を使うと、1.9.0を1.3.2で拡張することができます。
基本的に1.9.0のメソッドを呼び出します。

1.9.0にあって1.3.2にあるメソッドを呼んだ場合は、

ちゃんと1.3.2にあるメソッドが呼ばれます。

速くセクシーにjqueryを動かす裏ワザ

class より id 使え

セレクタ 結果（平均値）
ID $('#item[x]'); 25.1ms
クラス $('.item[x]'); 83.3ms

シンプルに設定

$('div#list ul li#item[x]');//おそい
$('#item');//音速

同じセレクタは変数化

//遅い

$(‘form[name="entry-form"]‘).css( ‘borderColor’,'red’ );
$(‘form[name="entry-form"]‘).css( ‘borderColor’,'red’ );
$(‘form[name="entry-form"]‘).css( ‘borderColor’,'red’ );
$(‘form[name="entry-form"]‘).css( ‘borderColor’,'red’ );

//早い
var entryForm = $('form[name="entry-form"]');
entryForm.css( 'borderColor','red' );
entryForm.css( 'borderColor','red' );
entryForm.css( 'borderColor','red' );
entryForm.css( 'borderColor','red' );

メソッドチェーン

$('form[name="entry-form"]').addClass( 'test' ).css( 'borderColor','red' )

jquery専用メソッド

// 遅い例
$('#entry-form p:first');
$('#entry-form p:last');

// 速い例
$('#entry-form p').first();
$('#entry-form p').last();

each使うなfor使え

//おせー
for( i = 0 ; i < array.length ; i++ ){
    // なんらかの処理
}

//はえー
for(var i = 0 ,len = array.length; i < len ; i++ ){
    // なんらかの処理
}

data の書き方

// 普通の書き方
$(elem).data(key, value);

// 10倍速い！
$.data(elem, key, value);

ファイル完成後はどうする？

javascriptを圧縮、結合しよう。

ここで grunt を使うといいよ。

でもぶっちゃけ速いのはベタ書き

　 1万回 10万回 100万回 1000万回
ネイティブ 3ms 13ms 70ms 580ms
jQuery 30ms 270ms 2800ms 27000ms

以上。