jQuery パフォーマンス最適化ガイド (1)_jquery

1、常に ID セレクターから継承します

jQuery で最も高速なセレクターは ID セレクターです。これは、JavaScript の getElementById() メソッドから直接取得されるためです。
たとえば、HTML コードの一部があります:

コードをコピーします コードは次のとおりです。

信号

• ;
  
• yellow


• <入力タイプ="ラジオ" クラス= "オフ" 名前="ライト" 値="グリーン" /> グリーン

以下のセレクタを使用すると効率が悪い。
var Traffic_button = $("#content .button");

ボタンにはすでに ID があるため、ID セレクターを直接使用できます。以下に示すように:
var Traffic_button = $("#traffic_button");

もちろん、これは 1 つの要素に対してのみです。複数の要素を選択する必要がある場合、必然的に DOM のトラバーサルとループが発生します。
パフォーマンスを向上させるために、最も近い ID から継承することをお勧めします。
以下に示すように:
var Traffic_lights = $("#traffic_light input");


2、クラス
の前にタグ (タグ名) を使用します。 jQuery で 2 番目に速いセレクターはタグ セレクター (例: $("head") ) です。
ID セレクターと比較すると、これはネイティブの getElementsByTagName() メソッドに由来します。

引き続き HTML コードを見てください:

コードをコピーしますコードは次のとおりです:

ライト

• ; 赤
  
• ;< input type="radio" class="off" name="light" value="green" />
  

" id ="traffic_button" type="submit" value="Go" />

例:赤と緑のラジオ ボタンを選択する必要があります。

次に示すように、タグ名を使用してクラスを制限 (変更) できます。
var active_light = $("input.on");もちろん、以下に示すように、最も近い ID と組み合わせることもできます。
var active_light = $("#traffic_light input.on");



タグを使用する場合クラスを変更する場合は、次の点に注意する必要があります。

(1) 以下に示すように、タグを使用して ID を変更しないでください。
var content = $("div#content"); 🎜>このようにして、セレクターは最初にすべての div 要素を走査し、次に #content と一致します。 (jQuery が 1.3.1 からセレクターのコアを変更してからはこの問題はなくなったようです。今のところ検証できません。)
(2) ID を使用しないでください。以下に示すように、ID を変更します。
var Traffic_light = $("#content #traffic_light");


注: 属性セレクターを使用する場合は、タグを使用して変更してください。以下に示すように: $('[row="c3221"]').html(); の代わりに
$ ('p[row="c3221"]').html(); >

3. jQuery オブジェクトをキャッシュする


jQuery オブジェクトをキャッシュすると、jQuery オブジェクトを変数にキャッシュする習慣を身につけることができます。
以下は jQuery の初心者が書いたコードです:




コードをコピーします


コードは次のとおりです:

$("#traffic_light input.on").bind("click", function(){ ... }); .on").css( "border", "1px 黄色の破線"); $("#traffic_light input.on").css("背景色", "オレンジ"); $( "#traffic_light input.on" ).fadeIn("slow");

ただし、これは行わないでください。

最初にオブジェクトを変数にキャッシュしてから、次のように操作する必要があります:

コードをコピー


コードは次のとおりです:

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

Remember, never let the same selector appear multiple times in your code.

Note: (1) In order to distinguish ordinary JavaScript objects from jQuery objects, you can add before the first letter of the variable on the $ sign.
(2) The above code can be improved using jQuery’s chain operation. As shown below:

Copy code The code is as follows:

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

If you plan to use jQuery objects in other functions, then you must cache them to the global environment.
The following code is as follows:

Copy code The code is as follows:

// In global The scope defines an object (for example: window object)
window.$my = {
head : $("head"),
traffic_light : $("#traffic_light"),
traffic_button : $ ("#traffic_button")
};
function do_something(){
// Now you can reference the stored results and manipulate them
var script = document.createElement("script");
$my.head.append(script);
// When you operate inside the function, you can continue to store the query in the global object.
$my.cool_results = $("#some_ul li ");
$my.other_results = $("#some_table td");
// Use the global function as an ordinary jquery object.
$my.other_results.css("border- color", "red");
$my.traffic_light.css("border-color", "green");
}

//You can also use it in other functions

The jQuery Performance Optimization Guide (1) ends here, please check the guide (2).

English original text:http://www.artzstudio.com/2009/04/jquery-performance-rules/

Chinese translation: http://rlog.cn/350 & http://cssrain.cn