Tag Archives: html5

jQueryのパフォーマンス高速化Tipsまとめ

Posted on by
Reply

jquery-logo

jQueryのパフォーマンス高速化Tipsのヒントリストです。

セレクタのパフォーマンスのヒント

1. 常に#ID から辿る

jQueryで要素を選択する最速の方法は、IDによるものです。

$('#content').hide();
$('#content p').hide();

2. クラスの前にタグを使用

jQueryで2番目に早いセレクタは、タグセレクタ（$（’head’））です。
なぜならそれはネイティブJavaScriptメソッド、getElementsByTagName（）だからです。
最良の方法は、接頭辞にタグ名（およびIDから派生）を持つクラスです。

var receiveNewsletter = $('#nslForm input.on');

クラスセレクタは、jQueryの最も遅いセレクタのひとつです
可能な限りそれ(タグ名とIDの接頭辞無し)を使用することは避けてください。

例えば、これは遅いです。”content”のIDを探す為に、div要素を全てループするからです。

var content = $('div#content'); // VERY SLOW, AVOID THIS

また、複数のID指定も遅いです。

var traffic_light = $('#content #traffic_light'); // VERY SLOW, AVOID THIS

3. サブクエリを使用

var header = $('#header');

var menu = header.find('.menu');
// or
var menu = $('.menu', header);

4. find()を使用

var divs = $('.testdiv', '#pageBody'); // 2353 on Firebug 3.6
var divs = $('#pageBody').find('.testdiv'); // 2324 on Firebug 3.6 - The best time
var divs = $('#pageBody .testdiv'); // 2469 on Firebug 3.6

5. チェーンメソッドを活用

セレクタをキャッシュするよりも、チェーンのjQueryメソッドをすると良いでしょう

$('#menu-item').click(function () {alert('test click');})
                     .css('display', 'block')
                     .css('color', 'red')
                     fadeTo(2, 0.7);

DOM操作のパフォーマンスのヒント

6. jQueryオブジェクトをキャッシュ

var header = $('#header');
var divs = header.find('div');
var forms = header.find('form');

7. DOM挿入のいずれかの種類を実行するときに単一の要素のすべてをラップする

DOM操作は非常に遅いです。できるだけ少なくしてHTML構造を変更してみてください。

var menu = '<ul id="menu">';
for (var i = 1; i < 100; i++) {
    menu += '<li>' + i + '</li>';
}
menu += '</ul>';
$('#header').prepend(menu);

// 代わりにこちら:

$('#header').prepend('<ul id="menu"></ul>');
for (var i = 1; i < 100; i++) {
    $('#menu').append('<li>' + i + '</li>');
}

イベントのパフォーマンスのヒント

8. readyイベント

// Instead of:
$(document).ready(function (){
    // your code
});

// you can do:

$(function (){
    // your code
});

一般的なjQueryのパフォーマンスのヒント

9. jQueryの最新バージョンを使用

最新バージョンは、通常、最良のものです。ただし、jQueryのコアバージョンを変更した後、コードをテストすることを忘れないでください。時にはそれは完全な下位互換性はありません。

10. HTML 5を使用

HTML5は軽量なDOM構造の標準を念頭にしています。軽量なDOM構造は、jQueryとロードのパフォーマンスに良い結果をもたらします。
だから、可能な場合はHTML5 を使用。

11. 必要とされていないコードをロードしない

不要なJSコードとセレクタをロードしないでください。

12. Googleソースコードからフレームワークをロードする

Google CDNからjQueryをロードする – ユーザーの最寄りのキャッシュの場所からスクリプトを高速に実現します。

// Link the minified version by specific version
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>