备注：本文仅限于使用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就可以仅仅做样式方面的工作。
分享到：
相关推荐
本篇文章将详细探讨Simpack中的自定义函数与ADAMS函数的差异，并提供相关的测试案例。 Simpack是一款强大的多体动力学仿真软件，支持用户通过编程实现自定义功能，以扩展其内置的物理模型。在Simpack中，二次开发...
在Android应用开发中，选项卡(Tabs)是一种常见的界面元素，用于展示多个相互关联的...在实际开发中，根据项目的具体需求，可以选择使用官方组件或自定义实现，两者各有优劣，关键在于找到最适合项目需求的解决方案。
1. **查找时间**：平均查找时间、最坏情况下的查找时间等，这通常与哈希函数的优劣和冲突解决策略有关。 2. **插入和删除时间**：同样考虑平均和最坏情况，这两个操作的效率直接影响哈希表的实际应用。 3. **空间...
在编程领域，自定义数据结构是提升程序效率和可...总的来说，VB、C/C++以及C#都提供了丰富的工具来创建自定义数据结构，理解它们之间的差异和优劣，有助于我们在开发过程中做出明智的选择，以实现高效、可维护的代码。
描述中提到“matlab程序，topsis工具箱”，这意味着提供的MATLAB代码可能是一个自定义的TOPSIS工具箱，尽管它不是原创的。这样的工具箱通常包括一系列函数，用于数据预处理、计算和可视化，以便用户能够方便地执行...
这两种方法在实际应用中各有优劣，可以根据具体需求选择合适的方法。 这个Java程序实现可能包含了以下功能： 1. 决策表的读取与构建。 2. 等价类的计算，包括等价类的划分和表示。 3. 核属性的计算，找出对决策结果...
总结来说，ASP.NET中的Web用户控件和自定义控件各有优劣，理解它们的特性和应用场景对于优化开发流程和提高代码质量至关重要。在实际开发中，开发者应根据项目需求，灵活选择和组合使用这两种控件。
金蝶软件优劣分析.pdf
排序算法的优劣比较，经过比较不同的数据量，进行不同的排序后的时间比较。
然而，性能并不是衡量技术优劣的唯一标准。易用性、兼容性和生态系统也是重要的考量因素。Web Service由于其标准性和广泛的社区支持，可以轻松地与其他平台和服务集成。而WCF虽然功能强大，但在跨平台兼容性和开发者...
简述湘军军制及其优劣.doc
这些排序算法各有优劣，适用于不同的场景。挂号法可能是一种优化过的排序算法，或者是一种特殊实现方式，它的具体细节需要通过查看源码来理解。 自定义数据数组的排序通常比基本数据类型的数组排序复杂，因为它涉及...
- **电路交换与分组交换的比较**：通过公式分析两种交换方式下的时延差异，得出在不同条件下的优劣关系。 - **分组交换中分组长度的选择**：通过数学模型计算得出最优的分组长度，以最小化总的时延。 - **因特网的...
全面解读Go语言：特点、优劣与应用场景及学习路径推荐.zip 全面解读Go语言：特点、优劣与应用场景及学习路径推荐.zip 全面解读Go语言：特点、优劣与应用场景及学习路径推荐.zip 全面解读Go语言：特点、优劣与应用...
总结，CRC32的三种实现方法各有优劣。软件实现简单易用，但性能较低；自定义指令提供显著的性能提升，但受限于特定硬件；自定义外设则在性能和成本之间做出权衡，适用于对速度有极高要求的应用场景。在选择实现方式...
《如何正确判断通信开关电源的优劣》 通信开关电源作为通信系统的重要组成部分，其性能直接关乎通信网络的稳定性和可靠性。20世纪80年代起，通信开关电源技术在我国逐渐普及，至今已在通信领域广泛应用。为了确保...
由于通信开关电源的性能直接影响着通信系统的可靠性，因此正确判别通信电源的优劣也就显得尤为重要。仅从电源的输入、输出特性指标来衡量开关电源的优劣，显然是不够的，还应该从下列几方面着手。