使用jquery改变对象class的一些效率研究

使用jquery改变对象class的一些效率研究

Posted on 八月 3rd, 2010 by admin
由于IE6不支持除a标签以外hover伪类，你可能需要用js去实现ie6下实现这个功能。我们可以用jquery提供的hover(over,out)方法轻松完成这一任务，在它的给的实例代码如下：

$("td").hover(
function () {
$(this).addClass("hover");
},function () {
$(this).removeClass("hover");
});

我们今天并不去研究hover是如何实现的，我们今天去探寻一下使用jquery去改变对象class的各种方法的效率问题。相信改变对象class是我们在实际使用js时非常常用的基本方法，或许各种写法都能达到我们的目的，但到底哪种方法更快呢？以后我们该如何去优化我们的代码？我们应该做简单的开始入手来使我们的js执行效率更快。首先我们要先说明测试平台：jquery版本为1.4.2、firefox版本为3.6.8。在jquery新的版本里提供了更丰富的方法和优化了原先的很多代码。而浏览器的测试可能光测试firefox比较局限，以后有时间可以补上其他浏览器下的测试结果。

//body中放入一个div元素
<div id="elem"></div>
//js中获取这个元素
var $elem = $('#elem');
//执行类似于如下的代码
console.time('addClass("aaa"),removeClass("aaa")');
for (var i = 0; i < 1000; i++) {
$elem.addClass('aaa');
$elem.removeClass('aaa');
}
console.timeEnd('addClass("aaa"),removeClass("aaa")');

我使用了上篇所说的console.time工具去做这一测试。为了放大各种方法的差距每种写法都循环完成1000次，并且因为在实际运用中添加和移除并不在一起，所有我们并没有用$elem.addClass('aaa').removeClass('aaa')这样的写法。在原来div中已有class值的情况下有些写法无法实现已省去。

结果如下：



其实我们可以看到在放大1000的情况下，js的执行效率依然让我们满意，基本都控制200ms以内。不过我们依然可以看到各种写法的佼佼者，在元素对象原先无class的情况$elem.addClass('aaa');$elem.removeClass();效率最快。而$elem.attr('class','aaa');$elem.removeAttr('class');则效率最慢。

看到这样的结果或许会对于你以后做类似操作时会有所启发。我的想法是，首先我们可以避免在整个过程中该元素不要拥有1个以上的class值，然后使用$elem.addClass('aaa');$elem.removeClass();这样的写法。

最后我们看看为什么$elem.removeClass(); 比 $elem.removeClass('aaa');快了那么点零星的时间。jquery的removeClass的方法如下：

removeClass: function( value ) {
if ( jQuery.isFunction(value) ) {
return this.each(function(i) {
var self = jQuery(this);
self.removeClass( value.call(this, i, self.attr("class")) );
});
}
if ( (value && typeof value === "string") || value === undefined ) {
var classNames = (value || "").split(rspace);
for ( var i = 0, l = this.length; i < l; i++ ) {
var elem = this[i];
if ( elem.nodeType === 1 && elem.className ) {
if ( value ) {
var className = (" " + elem.className + " ").replace(rclass, " ");
for ( var c = 0, cl = classNames.length; c < cl; c++ ) {
className = className.replace(" " + classNames[c] + " ", " ");
}
elem.className = jQuery.trim( className );

} else {
elem.className = "";
}
}
}
}
return this;
},

我们$elem.removeClass(); 时它会跳过22行处的这个判断少执行了内部的一些逻辑。当然更愿意深究的朋友可以继续跟踪其深层次的代码，而我想我的目的已经达到了。