jQueryパフォーマンス最適化ガイド

今jqueryの応用はますます多くなって、一部の学友はさわやかなcodingを享受する時性能の問題を無視して、例えば私.jqueryは多くのjsクラスライブラリの中で性能が優れているが、原生のjavascriptで開発されているわけではないので、性能の問題は重視する必要がある.

は、常にIDセレクタから

を継承する.

classの前にtag

を使用

jqueryオブジェクトをキャッシュ

強力なチェーン操作

を把握

サブクエリ

を使用

直接的なDOM動作を制限

.

発泡

無効なクエリーを消去

は$(window)に延期された.load

圧縮js

jqueryライブラリ

を全面的に把握
1.常にIDセレクタから継承
jqueryで最も速いセレクタはIDセレクタである.JavascriptのgetElementById()メソッドから直接来ているからです.
 

<div id="content">
    <form method="post" action="/">
        <h2>
            Traffic Light
        </h2>
        <ul id="traffic_light">
            <li>
                <input type="radio" class="on" name="light" value="red" />
                Red
            </li>
            <li>
                <input type="radio" class="off" name="light" value="yellow" />
                Yellow
            </li>
            <li>
                <input type="radio" class="off" name="light" value="green" />
                Green
            </li>
        </ul>
        <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
</div>

 
このような選択ボタンは非効率です.
 

var traffic_button = $('#content .button');

IDでボタンを直接選択する方が効率的:
 

var traffic_button = $('#traffic_button');

複数の要素を選択する多要素選択といえばDOM遍歴とループを言うが、これらは比較的遅いものである.性能を向上するためには、近いIDから継承することが望ましい.
 

var traffic_lights = $('#traffic_light input'); 

 
2.classの前にtagを使う
第2の速いセレクタはtagセレクタ($(’head’)である.同じように、元のgetElementsByTagName()メソッドから来ているからです.
 

	<div id="content">
    <form method="post" action="/">
        <h2>
            Traffic Light
        </h2>
        <ul id="traffic_light">
            <li>
                <input type="radio" class="on" name="light" value="red" />
                Red
            </li>
            <li>
                <input type="radio" class="off" name="light" value="yellow" />
                Yellow
            </li>
            <li>
                <input type="radio" class="off" name="light" value="green" />
                Green
            </li>
        </ul>
        <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
</div>

常に1つのtag nameでclassを制限(修飾)します(そして近いIDを忘れないでください):
 

var active_light = $('#traffic_light input.on');

注意:jqueryでClassは最も遅いセレクタです.IEブラウザの下では、そこで使用するかどうかにかかわらず、すべてのDOMノードを巡回します.タグnameでIDを修飾しないでください.次の例では、idが「content」のノードを検索するために、すべてのdiv要素を巡ります.
 

var content = $('div#content');

IDでIDを修飾するのも蛇足です.
 

var traffic_light = $('#content #traffic_light’');

 
3.jqueryオブジェクトをキャッシュする
jqueryオブジェクトを変数にキャッシュする習慣を身につける.いつまでもそうしないでください.
 

$('#traffic_light input.on').bind('click', function () {…
});
$('#traffic_light input.on').css('border', '3px dashed yellow');
$('#traffic_light input.on').css('background - color', 'orange');
$('#traffic_light input.on').fadeIn('slow');

オブジェクトを変数にキャッシュしてから操作したほうがいいです.
 

var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function () {…
});
$active_light.css('border', '3px dashed yellow');
$active_light.css('background - color', 'orange');
$active_light.fadeIn('slow');

ローカル変数がjqueryのパッケージであることを覚えておくために、通常は1つの$を変数の接頭辞として使用します.同じセレクタをコードに何度も表示させないでください.
キャッシュjquery結果、スタンバイ
jquery結果オブジェクトをプログラムの他の部分に使用するか、functionが複数回実行される場合は、グローバル変数にキャッシュします.jquery結果を格納するグローバルコンテナを定義し、他の関数で参照できます.

//             (  : window  )
window.$my = {
    //                   
    head: $('head'),
    traffic_light: $('#traffic_light'),
    traffic_button: $('#traffic_button')
};


function do_something() {
    //                  
    var script = document.createElement('script');
    $my.head.append(script);

    //           ,                .
    $my.cool_results = $('#some_ul li');
    $my.other_results = $('#some_table td');

    //             jquery     .
    $my.other_results.css('border - color', 'red');
    $my.traffic_light.css('border - color', 'green');
}

 
4.強力なチェーン操作を把握する
上記の例は、次のように書くこともできます.
 

var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function () {…
}).css('border', '3px dashed yellow').css('background - color', 'orange').fadeIn('slow');

これにより、より少ないコードを書くことができ、jsをより軽くすることができます.
 
5.サブクエリの使用
jQueryでは、パッケージされたオブジェクトに対して追加のセレクタ操作を使用することができる.変数に親オブジェクトを保存しているため、子要素の操作が大幅に向上します.
 

<div id="content">
    <form method="post" action="/">
        <h2>
            Traffic Light
        </h2>
        <ul id="traffic_light">
            <li>
                <input type="radio" class="on" name="light" value="red" />
                Red
            </li>
            <li>
                <input type="radio" class="off" name="light" value="yellow" />
                Yellow
            </li>
            <li>
                <input type="radio" class="off" name="light" value="green" />
                Green
            </li>
        </ul>
        <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
</div>

例えば、サブクエリの方法で、点灯または点灯しないランプをキャプチャし、後続の操作に備えてキャッシュすることができる.
 

var $traffic_light = $('#traffic_light'),
    $active_light = $traffic_light.find('input.on'),
    $inactive_lights = $traffic_light.find('input.off');

ヒント:カンマで区切る方法で複数のローカル変数を一度に宣言できます.バイト数を節約できます.
 
6.直接的なDOM操作を制限する
ここでの基本的な考え方は、メモリにあなたが本当に望んでいるものを構築し、DOMを更新することです.これはjQueryのベストプラクティスではありませんが、有効なJavaScript操作が必要です.直接のDOMは操作速度が遅い.たとえば、リスト要素のセットを動的に作成したい場合は、次のようにしないでください.
 

var top_100_list = [...],
    //      100         
$mylist = $('#mylist'); // jQuery     <ul>   
for (var i = 0, l = top_100_list.length; i < l; i++) {
    $mylist.append(' < li > ' + top_100_list[i] + ' < /li>');
}

要素文字列のセットをdomに挿入する前にすべて作成する必要があります.
 

var top_100_list = [...],
    $mylist = $('#mylist'),
    top_100_li = ""; //                 
for (var i = 0, l = top_100_list.length; i < l; i++) {
    top_100_li += ' < li > ' + top_100_list[i] + ' < /li>';
}
$mylist.html(top_100_li);

挿入する前に、複数の要素を個別の親ノードにラップすると、より高速になります.
 

var top_100_list = [...],
    $mylist = $('#mylist'),
    top_100_ul = ' < ul id = ”#mylist” > ';
for (var i = 0, l = top_100_list.length; i < l; i++) {
    top_100_ul += ' < li > ' + top_100_list[i] + ' < /li>';
}
top_100_ul += '</ul > '; //      
    $mylist.replaceWith(top_100_ul);

以上のことをしてもパフォーマンスの問題が心配な場合は、jqueryのclone()メソッドを試してみると、ノードツリーのコピーが作成され、「オフライン」でdom操作が可能になり、操作が完了したらノードツリーに戻すことができます.
DOM DocumentFragmentsを使用する.jQueryの著者が言ったように、その性能は直接的なdom操作より明らかに優れている.
 
7.泡立ち
特殊な場合を除き、jsイベント(click、mouseoverなど)ごとに親ノードに泡が立ちます.複数の要素に同じ関数を呼び出す必要がある場合に便利です.このような効率の悪いマルチエレメントイベントの傍受に代わる方法は、親ノードに一度バインドするだけで、どのノードがイベントをトリガーしたかを計算することができます.たとえば、入力ボックスが多数あるフォームにバインドする動作です.入力ボックスが選択されているときにclassを追加するバインドイベントは非効率です.
 

$('#entryform input).bind('focus', function () {
    $(this).addClass('selected');
}).bind('blur', function () {
    $(this).removeClass('selected');
});

フォーカスを取得し、フォーカスを失ったイベントを親レベルで傍受する必要があります.
 

$('#entryform').bind('focus', function (e) {
    var cell = $(e.target); // e.target grabs the node that triggered the event.
    cell.addClass('selected');
}).bind('blur', function (e) {
    var cell = $(e.target);
    cell.removeClass('selected');
});

親要素は、ターゲット要素に基づいてイベントをバインドできるスケジューラの役割を果たします.多くの要素に同じイベントの傍受をバインドしていることに気づいたら、どこか間違っているに違いありません.
 
8.無効なクエリーの削除
jqueryはマッチング要素がない場合を優雅に処理できるが、探すのに時間がかかる.もしあなたが全体的に1つのグローバルjsしか立っていないならば、すべてのjquery関数を$(document)ready(function(){//すべての自慢のコード})に詰め込む可能性が高い.ページで使用する関数のみを実行します.ほとんどの有効な方法は、行内の初期化関数を使用することです.これにより、テンプレートは、jsを実行するタイミングを正確に制御することができます.たとえば、「記事」ページテンプレートでは、bodyの最後に次のコードを参照することができます.
 

<script type="text/javascript">
    mylib.article.init();
</script>
</body>

ページテンプレートに変化の多いモジュールが含まれている場合は、ページに表示されない可能性があります.また、視覚的に表示されるために迅速にロードする必要がある場合は、初期化関数をモジュールの後に追いつくことができます.
 

<ul id="traffic_light">
    <li>
        <input type="radio" class="on" name="light" value="red" />
        Red
    </li>
    <li>
        <input type="radio" class="off" name="light" value="yellow" />
        Yellow
    </li>
    <li>
        <input type="radio" class="off" name="light" value="green" />
        Green
    </li>
</ul>
<script type="text/javascript">
    mylib.traffic_light.init();
</script>

あなたのグローバルjsライブラリは次のようになります.
 

var mylib = {
    article_page: {
        init: function () {
            // Article    jQuery  .
        }
    },
    traffic_light: {
        init: function () {
            // Traffic light    jQuery  .
        }
    }
}

 
9.$(window)に延期します.load
jqueryは開発者にとって魅力的なもので、何でも$(document)に掛けることができます.ready下伪装事件多くの例ではこのような状況を発見しますにもかかわらずradyは確かに役に立ち、ページレンダリング時に他の要素がダウンロードされていないうちに実行することができます.あなたのページがずっとロード中の状態であることに気づいたら、$(document)になる可能性があります.ready関数による.jquery関数を$(window)にバインドすることができます.loadイベントの方法は、ページのロード時のcpuの使用率を低減する.すべてのhtml()がダウンロードされた後に実行されます.
 

$(window).load(function () {
    //             jQuery  .
});

ドラッグアンドドロップ、ビジュアルエフェクト、アニメーション、隠し画像のプリロードなど、余分な機能があります.このような技術に適した場合である.
 
10.圧縮js
jsオンライン圧縮アドレスを推奨します.http://dean.edwards.name/packer/
 
11.jqueryライブラリを全面的に把握する
己を知り彼を知り,百戦百勝.jQueryをより深く理解してこそ、より柔軟に使用することができる.ここではjQueryの速報マニュアルを提供し、印刷して持ち運ぶことができます.jQueryのソースコードを通読する能力があればもっといいです.
 
 
原文アドレス:twitter