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

2014年7月16日更新 view: 61 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月17日 ( 日 ) にアクセスが多かった記事はこちら!