>

怎样才能高效地使用JQuery

- 编辑:正版管家婆马报彩图 -

怎样才能高效地使用JQuery

1. 行使新型版本的jQuery

jQuery的版本更新相当的慢,你应有总是采纳最新的版本。因为新版本会改革质量,还会有多数新作用。下边就来看看,不一样版本的jQuery质量差距有多大。这里是三条最广大的jQuery选择语句:

$('.elem')
$('.elem', context)
context.find('.elem')

我们用1.4.2、1.4.4、1.6.2五个本子的jQuery测量试验,看看浏览器在1秒内能够推行微微次。能够看出,1.6.2本子的运转次数,远远超过五个老版本。极度是首先条语句,质量有好数倍的增进。

别的语句的测量检验,例如.attr("value")和.val(),也是新本子的jQuery表现好于老版本。

2. 用对选拔器

在jquery中,你能够用各类接收器,接受同一个网页成分。每一种采用器的习性是不等同的,你应有精晓它们的脾性差距。

  1. 最快的采纳器:id接受器和因素标签选取器
  2. 非常的慢的选拔器:class选用器
  3. 最慢的选取器:伪类采用器和性质接纳器

3. 明白子成分和父成分的涉嫌

上边五个选用器,都是从父成分中精选子成分。你理解哪些速度最快,哪个速度最慢呢?

$('.child', $parent)
$parent.find('.child')
$parent.children('.child')
$('#parent > .child')
$('#parent .child')
$('.child', $('#parent'))

笔者们一句句来看。

  • $('.child', $parent):那条语句的乐趣是,给定叁个DOM对象,然后从当中筛选叁个子成分。jQuery会自动把那条语句转成$.parent.find('child'),这会促成一定的特性损失。它比最快的款式慢了5%-一成。
  • $parent.find('.child'):那条是最快的言辞。.find()方法会调用浏览器的原生方法(getElementById,getElementByName,getElementByTagName等等卡塔尔国,所以速度极快。
  • $parent.children('.child'):那条语句在jQuery内部,会接受$.sibling()和javascript的nextSibling()方法,叁个个遍历节点。它比最快的格局大要慢一半。
  • $('#parent > .child'):jQuery内部使用Sizzle引擎,管理种种选择器。Sizzle引擎的采用顺序是从右到左,所以那条语句是先选.child,然后再二个个过滤出父成分#parent,那招致它比最快的情势大意慢二分之一。
  • $('#parent .child'):那条语句与上一条是雷同的事态。然则,上一条只采取直接的子元素,这一条能够于接收多级子成分,所以它的速度更加慢,差相当的少比最快的样式慢了77%。
  • $('.child', $('#parent')):jQuery内部会将那条语句转成$('#parent').find('.child'),比最快的花样慢了23%。

就此,最棒选项是$parent.find('.child')。并且,由于$parent往往在头里的操作已经成形,jQuery会举办缓存,所以进一层加速了施行进程。

4. 不要过于施用jquery

jQuery速度再快,也回天无力与原生的javascript方法比较。所以有原生方法能够采纳的场合,尽量制止使用jQuery。

请看上边包车型大巴例子,为a成分绑定三个管理点击事件的函数:

$('a').click(function(){
 alert($(this).attr('id'));
});

这段代码的情趣是,点击a成分后,弹出该因素的id属性。为了赢得这么些天性,必得一而再一而再两回调用jQuery,第二回是$(this),第叁回是attr('id')。 事实上,这种处理完全不必要。更不易的写法是,直接使用javascript原生方法,调用this.id:

$('a').click(function(){
 alert(this.id);
});

基于测验,this.id的进程比$(this).attr('id')快了20多倍。

5. 搞好缓存

入选某多个网页成分,是开辟相当的大的步调。所以,使用采纳器的次数应当越少越好,何况尽量缓存选中的结果,便于今后一再使用。

譬如说,下边那样的写法正是糟糕的写法:

jQuery('#top').find('p.classA');
jQuery('#top').find('p.classB');

更加好的写法是:

varcached = jQuery('#top');
cached.find('p.classA');
cached.find('p.classB');

依照测量试验,缓存比不缓存,快了2-3倍。

6. 施用链式写法

jQuery的一大特征,便是同意利用链式写法。

$('div').find('h3').eq(2).html('Hello');

应用链式写法时,jQuery自动缓存每一步的结果,因而比非链式写法要快。根据测量检验,链式写法比(不接纳缓存的)非链式写法,大约快了五分之三。

7. 轩然大波的寄托管理(EventDelegation卡塔尔

javascript的风云模型,选取"冒泡"情势,也便是说,子成分的平地风波会逐级向上"冒泡",成为父元素的事件。 利用这点,能够大大简化事件的绑定。比方,有叁个报表(table成分卡塔尔,里面有玖拾玖个格子(td元素卡塔 尔(英语:State of Qatar),今后必要在种种格子上边绑定贰个点击事件(click卡塔 尔(英语:State of Qatar),请问是不是须要将下边的命令实践九十八回?

$("td").bind("click", function(){
 $(this).toggleClass("click");
});

回复是不要求,我们要是把那些事件绑定在table成分上边就足以了,因为td成分发生点击事件随后,这几个事件会"冒泡"到父成分table上面,进而被监听到。因此,这一个事件只供给在父成分绑定1次就能够,而不要求在子成分上绑定玖拾玖回,从而大大提升质量。那就叫事件的"委托管理",也等于子成分"委托"父元素管理那么些事件。

实际的写法有两种。第风姿洒脱种是应用.delegate()方法:

$("table").delegate("td","click", function(){
 $(this).toggleClass("click");
});

其次种是采纳.live()方法:

$("table").each(function(){
 $("td", this).live("click",function(){
  $(this).toggleClass("click");
 });
});

这二种写法基本卓绝。唯生龙活虎的分别在于,.delegate()是当事件冒泡到钦点的父成分时接触,.live()则是当事件冒泡到文书档案的根成分后触 发,因而.delegate()比.live()稍快一些。其它,那二种艺术比较古板的.bind()方法还应该有一个益处,那正是对动态插入的元素也使得,.bind()只对已经存在的DOM成分有效,对动态插入的因素无效。

基于测量试验,委托管理比不委托管理,快了几十倍。在委托拍卖的动静下,.delegate()又比.live()大致快26%。

8. 少改动DOM结构

更正DOM结构开支异常的大,由此不用频仍使用.append()、.insertBefore()和.insetAfter()那样的法门。若是要插入四个因素,就先把它们统意气风发,然后再一遍性插入。根据测试,归并插入比不联合插入,快了临近10倍。

只要你要对四个DOM成分实行大气拍卖,应该先用.detach()方法,把那几个因素从DOM中收取来,管理达成今后,再另行插回文书档案。依照测量试验,使用.detach()方法比不使用时,快了30%。

假定你要在DOM成分上囤积数据,不要写成上面那样:

var elem = $('#elem');
elem.data(key,value);

而要写成:

var elem = $('#elem');
$.data(elem,key,value);

听闻测量试验, 后生机勃勃种写法要比前意气风发种写法,快了相近10倍。因为elem.data()方法是概念在jQuery函数的prototype对象方面包车型地铁, 而$.data()方法是概念jQuery函数上边的,调用的时候不从繁缛的jQuery对象上调用,所以速度快得多。

9. 准确管理循环

循环总是豆蔻梢头种相比耗费时间的操作,假使得以运用复杂的选择器直接当选成分,就绝不选取循环,去叁个个识别元素。

javascript原生循环方法for和while,要比jQuery的.each()方法快,应该先行使用原生方法。

10. 尽量少生成jquery对象

每当你选用叁遍选取器(比方$('#id')卡塔尔,就能扭转一个jQuery对象。jQuery对象是二个很宏大的目的,带有超级多天性和方式,会占用不菲能源。所以,尽量少生成jQuery对象。

举个例子来佛讲来讲,大多jQuery方法都有五个版本,五个是供jQuery对象使用的本子,另三个是供jQuery函数使用的本子。上边多少个例子,都以抽出贰个成分的公文,使用的都是text()方法。你不只能够使用针对jquery对象的版本:

var $text = $("#text");
var $ts = $text.text();

也得以运用针对jQuery函数的版本:

var $text = $("#text");
var $ts = $.text($text);

是因为后豆蔻梢头种针对jquery函数的本子不经过jQuery对象操作,所以相对耗费十分小,速度超级快。

. 使用最新版本的jQuery jQuery的本子更新比一点也不慢,你应该总是利用新型的版本。因为新版本会改正品质,还会有好些个新功效。下面就来走访,分歧...

本文由网络计算发布,转载请注明来源:怎样才能高效地使用JQuery