HTML/JS 良好实践：添加太多 id 好不好？答案

【问题标题】：HTML/JS good practices: Is it good to add too many ids?HTML/JS 良好实践：添加太多 id 好不好？
【发布时间】：2013-01-10 06:12:45
【问题描述】：

我有一个 HTML 页面，我想将元素添加到特定列表中，如下所示：

<div id="list-of-divs">
<div id="name-specific-id">
// content
</div>

<div id="another-id">
//content
</div>
.
.
.
<div id="yet-another-id">
</div>

现在我想将新的divs 添加到该列表中，例如：

<div id="new-option-panel">
<input id="first-textbox-id" type="text">
<input id="second-textbox-id" type=text">
<button>Add new option</button>

当然，添加是用jQuery代码完成的。

我的问题是：在 HTML 代码中添加 many 这样的 ids 并在我的 jQuery 代码中依赖它们是一种好习惯，还是对 HTML 和 jQuery 来说都是不好的做法，我应该在我的 jQuery 代码中找到其他方法（例如，取决于 DOM 遍历）？

仅举例说明我的意思：增加许多 ids 会减慢 Javascript 的执行速度吗？

【问题讨论】：

【解决方案1】：

Id 的查询速度更快，但维护起来却非常繁琐，因此我会通过仅在必要时使用类和 id 来承受“性能损失”并让我的代码更加明显。在您的示例中，我可能会将 id 保留在 div 上，但输入元素不需要，一个简单的类将适用于 jQuery 和 CSS，甚至根本没有类。

【讨论】：

另外，像#important-element .specific-subelement 这样的选择器往往会提供更明显的上下文，并且通常比#specific-subelement 更具可读性。
+ 1 我还要说 id 更快。我还想补充一点，在某些情况下，如果没有 id，您将无法使用它 - 例如，如果每个项目都是数据库中的一条记录，应该持久化/更新。如果每个字段都有一个标签，那么输入上的 id 可能很重要，而不是围绕它。
@lanzz 这个答案和提供的链接中的基准可能很有趣：Fastest selector method in jquery and CSS - ID or not?
@insertusernamehere：这很有趣，但我猜是预料之中的。 getElementsByClassName 比 querySelectorAll 快，我想这是 #id .class 使用的完整字符串...
我对 JSPerf 又爱又恨，因为通用测试通常非常不可靠，但好的测试可以提供有用的提示来提高代码的性能。在实现原生浏览器功能时，我只选择最方便的，在本例中为 querySelectorAll。

【解决方案2】：

Id 选择器后跟 Tag 选择器是最好的选择，因为它们直接映射到原生 .getElementById() 和 .getElementByTag() 方法

我建议您在遍历 DOM 时始终从最近的父 ID 下降。与大多数语言一样，您必须为特定应用程序考虑可读性/性能权衡。

【讨论】：