jQuery 성능 최적화 가이드(1)_jquery

1, 항상 ID 선택기에서 상속

jQuery에서 가장 빠른 선택기는 ID 선택기입니다. 왜냐하면 JavaScript의 getElementById() 메서드에서 직접 가져오기 때문입니다.
예를 들어 HTML 코드가 있습니다:

코드 복사 코드는 다음과 같습니다.

신호등

• ;
  
• ; 노란색

다음 선택자를 사용하면 효율성이 비효율적입니다. .
var Traffic_button = $("#content .button");

버튼에는 이미 ID가 있으므로 ID 선택기를 직접 사용할 수 있습니다. 아래와 같이:
var Traffic_button = $("#traffic_button")

물론 이는 단일 요소에만 적용됩니다. 여러 요소를 선택해야 하는 경우 필연적으로 DOM 순회 및 루핑이 수반됩니다.
성능 향상을 위해 가장 가까운 ID에서 상속하는 것이 좋습니다.
아래와 같이
var Traffic_lights = $("#traffic_light input")

2, 클래스 앞에 태그(태그 이름) 사용

jQuery에서 두 번째로 빠른 선택기는 태그 선택기입니다(예: $("head") ).
ID 선택기와 비교할 때 기본 getElementsByTagName() 메서드에서 가져옵니다.

계속해서 지금 HTML 코드를 살펴보세요.

코드 복사 코드는 다음과 같습니다.

traffic 조명

• 
  
• 노란색
  
• ;< input type="radio" class="off" name="light" value="green" /> 녹색

예를 들어, 빨간색과 녹색 라디오 버튼을 선택해야 합니다.
그런 다음 아래와 같이 태그 이름을 사용하여 클래스를 제한(수정)할 수 있습니다.
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")


참고: 속성 선택기를 사용하는 경우 태그를 사용하여 수정해 보세요. 아래와 같이:
$ ('p[row="c3221"]').html(); 대신: $('[row="c3221"]').html(); >

3. jQuery 객체 캐시

jQuery 객체를 캐싱한다는 것은 jQuery 객체를 변수로 캐싱하는 습관을 길러야 함을 의미합니다. 다음은 jQuery 초보자가 작성한 코드입니다.

코드 복사 코드는 다음과 같습니다:$("#traffic_light input.on").bind("click", function(){ ... })

$("#traffic_light input .on").css( "테두리", "1px 노란색 점선");

$("#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(){ ... }); ("border", "1px 破線の黄色");
$active_light.css("background-color", "orange");
$active_light.fadeIn("slow");
コード内で同じセレクターを複数回出現させないでください。

注: (1) 通常の JavaScript オブジェクトと jQuery オブジェクトを区別するために、変数の最初の文字の前に次の文字を追加できます。 $ 記号。
(2) 上記のコードは、jQuery のチェーン操作を使用して改善できます。以下に示すように:

コードをコピー コードは次のとおりです:var $active_light = $ ("# Traffic_light input.on");

$active_light.bind("click", function(){ ... })

.css("border", "1px 破線の黄色")
.css( "background-color", "orange")
.fadeIn("slow");



他の関数で 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 オブジェクトとして使用します。 css("border-color", "red");
$my.traffic_light.css("border-color", "green");
}

// を使用することもできます。他の関数で


jQuery パフォーマンス最適化ガイド (1) はここで終了します。ガイド (2) を確認してください。

英語原文：

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

中国語翻訳: http://rlog.cn/350

& http://cssrain.cn