Jqueryコードの最適化のコツを素早く把握し、ページの実行速度を向上させる.

本稿では、jquery最適化について、最もよく見られる3つの側面から説明します.
一、セレクタの方面から最適化する:
Jqueryセレクタの原理は、実はjsのセレクタ(getElementByXXXX)などに基づいている.だから、異なるセレクタの選択速度を簡単に知ることができます.
jsのようにgetElementById、getElementByTagNameは速度が速い方法があります.つまり、コード内の$("#xxx")、$("input")の速度がクラス名セレクタ$(".xxx")よりも速くなる.ここでidセレクタの速度は最も速い.
クラス名が一意ではないため,jqueryはクラス名セレクタを実現する際にdomツリーを巡る方法で実現する.したがって,クラス名セレクタの速度が考えられる.
コードを最適化するには、次のいくつかの面から最適化できます.
1、idセレクタ、tagセレクタを優先的に使用する.
2、クラス名セレクタを使用する場合、次のような範囲を提供します.

var selectedItem = $('.listItem', $('.myList'));

これで彼はすべてのdomツリーの中でこのクラス名の要素を探す必要はありません.
3、自分のセレクタを定義できます.コードに書くだけです.

$.extend($.expr[':'], { over100pixels: function(a) { return $(a).height() > 100; } });

自分で定義したセレクタを使うことができます

 $('.box:over100pixels').click(function() { alert('The element you clicked is over 100 pixels high'); });

4、同じセレクタをコードで繰り返し使用する場合は、変数で代用する

for(var i=0;i<100;i++){
	$(“.sd”).css(“height”,”1px”);
}

は

var $dom=$(“.sd”);
for(var i=0;i<100;i++){
	$dom.css(“height”,”1px”);
}

効率が大幅に向上します
5、同じ要素の複数の操作がある場合、別々に書く必要はなく、方法を使って接続することができます.

$('#mypanel') .find('TABLE .firstCol') .removeClass('.firstCol') .css('background' : 'red') .append('This cell is now red');

これにより、複数の文が要素を複数回選択することを回避できます.
6、常に最新のjqueryバージョンを使用し、新しいバージョンごとにセレクタのパフォーマンスを最適化します.新しいバージョンのjqueryを使用すると、コードのパフォーマンスが向上します.
二、dom操作の面から最適化する:
私たちがよく使うdom挿入のような操作です.append(),.prepend(),.after(),.wrap()などは、かなり時間がかかります.
特に操作を繰り返す場合.でもよく繰り返し使います.配列データを取得するときは、ページ上のdomをつづることがよくあります.
では、次の選択肢があります.
次のことができます.

$.each(response.data,function(index,item){
$(“.aaa”).append(“
”+item+”
”);
});

しかし、上記の最適化手段に基づいて、2つの最適化を行うことができます.
第1$(".aaa")セレクタは、ループが完了するまで操作を待つことができる第2 append()操作を提案することができる.

var $dom=$(“.aaa”);
var str=””;
$.each(response.data,function(index,item){
str+=“
”+item+”
”;
});
$dom.append(str);

上には配列で文字列を集めることもできます.
 
三、イベントバインドの面から最適化:
バインドイベントは、これ以上通用しない操作です.
クラスのイベントをバインドすると、クラス名のdomが非常に多くなる可能性があります.しかし、私たちはバインドイベントを書くことに慣れています.

$('.kkk ').click(function(){ $(this).css('background', 'red'); });

この書き方では、kkkクラス名の要素が複数のイベントにバインドされる可能性があります.この場合、どのように最適化すればいいのでしょうか.

$('#myTable').click(function(e) { var clicked = $(e.target); clicked.css('background', 'red'); });

これによりkkkクラス名のdomがいくつあっても1つのイベントだけがバインドされます.これをイベントエージェントと呼びます.
 
これらの優れたjqueryコード最適化方法に加えて、ページのロード速度を改善する方法はたくさんあります.良いコード習慣を身につけることは、優秀なプログラマーの基本的な仕事であり、一歩一歩優秀になってこそ、より速く、より安定することができます.