备注:本文仅限于使用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就可以仅仅做样式方面的工作。
分享到:
相关推荐
金蝶软件优劣分析.pdf
排序算法的优劣比较,经过比较不同的数据量,进行不同的排序后的时间比较。
简述湘军军制及其优劣.doc
针对属性指标值为犹豫模糊...利用同一属性下的前景价值方差计算属性的权重,并基于前景理论计算各方案的加权前景价值,进而对决策方案进行优劣排序;通过对云计算产品的选择实例验证提出的决策方法的可行性与有效性。
python职业发展方向有哪些,各有什么优劣?.docxpython职业发展方向有哪些,各有什么优劣?.docxpython职业发展方向有哪些,各有什么优劣?.docxpython职业发展方向有哪些,各有什么优劣?.docxpython职业发展方向有...
浅析红楼梦中林黛玉及薛宝钗的性格优劣论.doc
消失的点餐台—智能点餐的优劣讨论 (2).pdf消失的点餐台—智能点餐的优劣讨论 (2).pdf消失的点餐台—智能点餐的优劣讨论 (2).pdf消失的点餐台—智能点餐的优劣讨论 (2).pdf消失的点餐台—智能点餐的优劣讨论 (2).pdf...
城市生活垃圾主要处理方式及优劣对比.pdf
由于通信开关电源的性能直接影响着通信系统的可靠性,因此正确判别通信电源的优劣也就显得尤为重要。仅从电源的输入、输出特性指标来衡量开关电源的优劣,显然是不够的,还应该从下列几方面着手。
本文首先介绍了AV功放的组成及原理,其次解答了功放是不是越沉越好以及AV功放常见作假手段,阐述了何判断AV功放优劣以及选购功放的考量发因素,具体的跟随小编来详细的了解一下。 AV功放的组成及原理
通风系统保障着矿井正常的生产活动,优选技术可行、经济合理、安全...其次,利用多属性决策模型对方案优劣进行排序。研究结果表明:采用该模型的评价结果与模糊层次分析法的评价结果一致,从而验证了模型的合理性与可行性。
几大主流开源飞控平台优劣比较,有APM px4/pixhawk autopilot PPZ MWC等飞控详细分析。
simpack二次开发自定义函数和adams函数的对比和测试案例,包括源代码和案例
matlab程序,topsis工具箱 ,本代码仅供参考,非本人原创
winpe哪个最好用?主流pe系统优劣点评.docx
简称OCCT,主要用于检测系统在高负荷工作状态下系统的稳定性,检测CPU,内存,显卡等用电时电压与温度的实时变化,因OCCT对电源输出的检测结果较为详尽、直观,所以,OCCT一直被用来检测电源品质的优劣。 软件使用...
预测是根据以往及现在的已知信息,采取一定的方法或技术,对事物的未来发展趋势和结 果进行估计或推测。 假如要以预测结果为基础作出决策,那么,当预测出现误差时,决策就会遭受损失,因为决 策不是最优的,并且一般来说,...
文章基于Z+Z平台下超级画板辅助数学教学的诞生,与传统黑板所展现的课堂形式进行对比!比较其优劣!
该算法将非线性问题线性化, 定义<em>P占优支配关系求出个体的序值, 定义区间拥挤距离来区分具有相同序值个体的优劣, 采用约束精英策略删除种群中不满足约束的个体. 将选出的个体作为方案集, 目标函数作为属性集, ...
C51 PIC AVR优劣分析