使用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行处的这个判断少执行了内部的一些逻辑。当然更愿意深究的朋友可以继续跟踪其深层次的代码，而我想我的目的已经达到了。