jquery 1.xと2.x の違い、さらに動作を高速にするための設定

2014年7月16日更新 view: 8010 view
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にあるメソッドが呼ばれます。

CDNから読み出せ

jqueryをわざわざダウンロードして、FTPでアップして読み込むなんて昭和。

https://developers.google.com/speed/libraries/devguide?hl=ja

上記のようなCDN (jsを直リンクで利用できるサービス) を使おう。
jquery以外にもいろいろあるよ!

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

メリット

  • jsをわざわざDLしなくてもいい
  • ユーザーが他のサイトで同じjsを利用していた場合キャッシュを利用するの音速で使える

速くセクシーに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使え

上は、array をカウントしそのまま利用。
下は array をカウントしたものをlenに代入し利用。

スポンサードリンク
//おせー
for( i = 0 ; i < array.length ; i++ ){
    // なんらかの処理
}

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

jqueryでマッチした要素全てに処理する場合は?

ar = $("#tester [data-id]");
len = ar.length;
i = 0;
while (i < len) {
    ar.eq(i).text()
    i++;
}

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

javascriptを圧縮、結合しよう。

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

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

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

以上。

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

3月27日 ( 月 ) にアクセスが多かった記事はこちら!