`

谈谈自定义属性的优劣

jquery 
阅读更多
备注：本文仅限于使用jquery的基础上；

在获取某个DOM元素的时候，有多种方式，在查找效率上肯定是最重要的。
众所周知，id是在html中是唯一的，在查找时也是效率最高的。 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="guahao">
		</div>
		
		<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
		<script>
			console.log($("#guahao").length);
			var oldTime = (new Date()).valueOf();
			var times = 1000000;
			for(var i = 0; i < times; i++){
				$("#guahao");
			}
			var currentTime = (new Date()).valueOf();
			console.log("查找" + times + "次id使用时间" + (currentTime - oldTime));
		</script>
	</body>
</html>

控制台打印结果 
1
查找1000000次id使用时间634

而通过class呢，用$(".guahao")来查找 
1
查找1000000次class使用时间1322

那么自定义的属性呢 
<div sid="guahao">
$("[sid=guahao]")
</div>


1
查找1000000次sid使用时间2330


很明显，我们可以看出，在10万次的查找结果下，id的效率最高，自定义标签的效率最低

这是比较简单的结果，我们来设想一下复杂一点的页面逻辑：（这个时候id就不测了，原因嘛，大家懂得） 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="guahao">
			<a class="a">
				<span class="guahao"></span>
			</a>
		</div>
		<div class="b">
			<div class="shenme">
				<h2 class="guahao"></h2>
			</div>
		</div>
		
		<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
		<script>
			console.log($(".guahao").length);
			var oldTime = (new Date()).valueOf();
			var times = 1000000;
			for(var i = 0; i < times; i++){
				$(".guahao");
			}
			var currentTime = (new Date()).valueOf();
			console.log("查找" + times + "次class使用时间" + (currentTime - oldTime));
		</script>
	</body>
</html>


打印结果 
3
查找1000000次class使用时间1794



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div sid="guahao">
			<a sid="a">
				<span sid="guahao"></span>
			</a>
		</div>
		<div sid="b">
			<div sid="shenme">
				<h2 sid="guahao"></h2>
			</div>
		</div>
		
		<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
		<script>
			console.log($("[sid=guahao]").length);
			var oldTime = (new Date()).valueOf();
			var times = 1000000;
			for(var i = 0; i < times; i++){
				$("[sid=guahao]");
			}
			var currentTime = (new Date()).valueOf();
			console.log("查找" + times + "次sid使用时间" + (currentTime - oldTime));
		</script>
	</body>
</html>

控制台打印结果 
3
查找1000000次sid使用时间2746


我们可以看出，在同等结构的页面中，查询10万次，相差0.95秒。
那么平时我们用的页面呢，假定一个页面复杂程度是测试页面的1000倍，经测试，class耗时3-15ms，sid的耗时3-20ms,两者的耗时基本可以忽略不计。

那么这两种方式在jquery代码中是怎么查找的呢？

在我用的jquery1.11版本里
jquery 查找id的步骤 
// 此地的selector 是过滤条件  即： #guahao  .guahao  [sid=guahao]
//rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/  ;
match = rquickExpr.exec( selector );

//后面就是判断了
if ( match && (match[1] || !context) ) {
}

通过上面这句代码，我们可以看出j如果是id的话，jquery在后面直接使用原生的js获取方法 
// match[2] = “guahao”；
elem = document.getElementById( match[2] );


jquery 查找class的步骤 

//在判断不是id的适合，会调用jquery的find()方法，在2733行
jQuery.find( selector, self[ i ], ret );

// 在793行
else if ( (m = match[3]) && support.getElementsByClassName ) {
				push.apply( results, context.getElementsByClassName( m ) );
				return results;
			}


核心还是调用js原生的context.getElementsByClassName()；

jquery 查找自定义属性的步骤 
//前面跟class查找一样
push.apply( results,newContext.querySelectorAll( newSelector ));
					return results;

我们可以看出，jquery调用的是js原生的context.querySelectorAll()方法，这个方法的效率还是很高的。但是并不支持IE6，7。


上面啰嗦了这么多，我们可以得出这样的结论，在使用jquery时，id的效率>class>自定义标签
但是效率的差距在我们页面应用开发上的几乎可以忽略不计。（备注：不会超过0.5ms）

下面谈一下使用自定义标签的好处：
我所谈的自定义标签，并非是data-**  类型的标签，它的作业不是为了存储某些数据，而仅仅是为了拿到某个属性的值，例如我所写的sid，它的出现具有替代id的作用，并且具有可重复性，在开发的过程中，如果我们为了找到某些元素，仅仅使用id和sid完全可以实现所有的功能。
在使用sid之后，class或者其他属性就可以解脱出来，比如class就可以仅仅做样式方面的工作。
分享到：
| 剖析如何与设计人员沟通
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics