jQuery代码性能小细节

选择器Selector的使用

$("#id")
使用id来定位DOM元素无疑是最佳提高性能方式,因为jQuery底层将直接调用本地方法document.getElementbyId(),如果熟悉javascript的朋友应该了解这个方法将直接通过元素id来返回对应的元素。当然,如果这个方式不能直接找到你需要的元素,那么你可以考虑调用.find()方法。如下:
$("#gbid").find("div")
使用以上方法可以有效的缩小你定位的DOM元素。

$("p"),$("div"),$("input")
使用标签名是第二优化选择,因为jQuery将直接调用本地方法document.getElementsByTagname()来定位DOM元素。

$(".class")
使用.class方法对于我们来说稍微复杂些,对于比较新的浏览器例如,IE9,它支持本地方法document.getElementsByClassName(),而对于老的浏览器,例如,IE8或者更早版本来说,不得不使用DOM搜索方式来实现,自然会对于性能产生比较大的影响。所以大家得选择使用。

$("[attribute=value]")
对于利用属性来定位DOM元素,本地javascript方法中并没有直接的实现。所以大都都是使用DOM搜索方式来达到效果,很多现代浏览器支持querySelectorAll()方法,但是不同浏览器的性能还是有区别。总体来说,使用这种方式来定位DOM元素,并不是非常理想。所以为了获得更好的优化效果,你需要尽量避免这个对性能有害的使用方式。

$(":hidden")
和上面使用属性来定位DOM的方式类似,这种伪选择器也同样没有本地js方法来直接实现。而且jQuery需要搜索每一个元素来定位这个选择器,将会对你的应用带来比较大的性能问题。所以大家尽量不要使用,当然,如果你非要使用的话,请先是用find方法定位父元素,然后,再使用这个选择器,这样会帮助你很好的优化性能,如下:
$("#gbdiv").find(":hidden")

以上是一个基本使用选择器的规则,自上而下性能依次下降,如果大家在开发中使用选择器,请遵循以上这个简单的优化性能规则。

链式调用(chaining)
链式调用是jQuery的一个非常不错的特性,它能够帮助你写出非常简洁的代码,主要的思想在于,处理同一个对象的时候,jQuery会返回一个jQuery对象,好处是你可以继续的处理下一个方法。非常典型的应用如下:
$("#gbdiv").hide();
$("#gbdiv").css("color", "#202020");
$("#gbdiv").show();
如果使用链式调用,优化性能如下:
$("#gbdiv").hide().css("color", "#202020").show();
好处在于你不用多次调用$("#gbdiv"),当然,如果你非要这样写,建议你考虑使用缓存方式。但是使用链式调用会使得jQuery代码更加简单并且性能更好。

缓存caching
在书写jQuery代码中,开发人员经常喜欢如下书写:
$("#gbdiv").hide();
$("#gbdiv").css("color", "#202020");
$("#gbdiv").show();
当然,无可厚非,编程中的跳跃思维导致你有可能这样书写代码,但是这样的结果是导致jQuery会在创建每一个选择器的过程中,查找DOM,比较好的优化性能方式是如下书写:

var gbin1=$("#gbdiv");
gbin1.hide();
gbin1.css("color", "#202020");
gbin1.show();
当然使用链式更加简洁,但是同样使用caching的重要,这和Java开发中不要随意的创建对象一样,可以帮助你有效的提高代码运行性能。

事件代理
在jQuery1.7中提供了一个新的方式.on(),这个方法帮助你将整个事件监听封转到一个便利方法中,这里有个例子:
$('#gbin1').find('div').click(function() {
$(this).toggleClass('gbin1');
});
这个方法很简单,找到指定ID的div,并且添加或者删除class=gbin1 。
如果你在#gbin1中有1000个div的话,你将绑定1000个事件。这将带来很负面的性能影响,使用.on方法,你可以重构如下,同样帮助你有效的优化性能:
$('#gbin1').on('click','div',function() {
$(this).toggleClass('gbin1');
});

循环语句中的DOM操作
使用jQuery可以很方便的添加,删除或者修改DOM节点,但是在一些循环,例如,for(), while()或者$.each()中处理节点,大家得注意一下,这里有个例子:
var data = ["Saab","Volvo","BMW"];
$.each(data, function(i, item){
var newitem='<div>' + item + '</div>';
$("#gbcontainer").append(newitem);
});

以上代码中,我们将每一个新添加的tag都作为一个节点添加到容器ID中,实际上jQuery操作节点的成本也不低,更好的方式是尽可能的减少DOM操作,修改代码优化性能如下:
var data = ["Saab","Volvo","BMW"];
tmp = '';
$.each(data, function(i, item){
tmp +='<div>' + item + '</div>';
});
$("#gbcontainer").append(tmp);

原文地址:https://www.cnblogs.com/archrjoe/p/3429911.html