谈谈自定义属性的优劣

最新推荐文章于 2021-06-16 01:12:11 发布

iteye_8034

最新推荐文章于 2021-06-16 01:12:11 发布

阅读量188

点赞数

分类专栏：前端文章标签： jquery ViewUI

本文链接：https://blog.csdn.net/iteye_8034/article/details/82638623

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

[size=medium][color=green]备注：本文仅限于使用jquery的基础上；[/color][/size]

[size=large]在获取某个DOM元素的时候，有多种方式，在查找效率上肯定是最重要的。
众所周知，id是在html中是唯一的，在查找时也是效率最高的。[/size]


<!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>

[size=medium]控制台打印结果[/size]


1
查找1000000次id使用时间634

[size=medium]而通过class呢，用$(".guahao")来查找[/size]


1
查找1000000次class使用时间1322

[size=medium]那么自定义的属性呢[/size]


<div sid="guahao">
$("[sid=guahao]")
</div>


1
查找1000000次sid使用时间2330

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

这是比较简单的结果，我们来设想一下复杂一点的页面逻辑：（这个时候id就不测了，原因嘛，大家懂得）[/size]


<!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>

[size=medium]打印结果[/size]


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>

[size=medium]控制台打印结果[/size]


3
查找1000000次sid使用时间2746

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

[color=red]那么这两种方式在jquery代码中是怎么查找的呢？[/color]

在我用的jquery1.11版本里
jquery 查找id的步骤[/size]


// 此地的selector 是过滤条件  即： #guahao  .guahao  [sid=guahao]
//rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/  ;
match = rquickExpr.exec( selector );

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

[size=medium]通过上面这句代码，我们可以看出j如果是id的话，jquery在后面直接使用原生的js获取方法[/size]


// match[2] = “guahao”；
elem = document.getElementById( match[2] );

[size=medium]jquery 查找class的步骤
[/size]


//在判断不是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;
			}

[size=medium]核心还是调用js原生的[color=red]context.getElementsByClassName()；[/color]

jquery 查找自定义属性的步骤[/size]


//前面跟class查找一样
push.apply( results,newContext.querySelectorAll( newSelector ));
					return results;

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

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

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

iteye_8034

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
谈谈自定义属性的优劣

[size=medium][color=green]备注：本文仅限于使用jquery的基础上；[/color][/size][size=large]在获取某个DOM元素的时候，有多种方式，在查找效率上肯定是最重要的。众所周知，id是在html中是唯一的，在查找时也是效率最高的。[/size][code="java"] ...
复制链接

扫一扫

专栏目录