页面上元素ID的最大数量是多少？

Question

在这方面遇到了一些问题。目前我所找到的唯一相关内容是与映射API有关的，当JavaScript处理约500个ID时会出现严重卡顿。但我非常确定这与使用的特定脚本有关，而不是一般规则。

我有一个包含复杂列表的页面。列表中的每个项目都有大约10个不同的ID，并且有几个JavaScript脚本在运行。该列表正在分页显示，用户可以选择每页显示多少项。考虑到列表中的每个项目都有约10个ID，我想知道我应该将每页最大显示项数设置为多少（用户可以选择在一页上查看的记录总数）。

我的意思是 - 除了基于记录数量的增加而导致的加载时间增加外，是否已知存在某个ID数量的限制或CSS / JavaScript性能开始急剧下降的情况？

编辑：请原谅，每个“项目”都是一个复杂的名片（为了形象化），其中涉及三个div和一个小型表单。这就是为什么每个项目（记录）约有10个ID的原因。

- Reno

---

一个项目有几个ID？一个元素只能有一个ID。通常你应该考虑是否有必要为这些项目设置ID。 - Felix Kling

尽可能少地使用ID。每个元素使用多个ID不仅是不正确的，而且意味着您设置页面的方式从根本上存在缺陷。 - Stephan Muller

所有的id必须是唯一的，一个元素只能有一个id。此外，您可能只想为需要使用document.getElementById或CSS规则进行操作的元素分配id。 - Robby Pond

为什么所有元素都需要ID？你用ID做什么？ - RoToRa

Answer 1

您没有回答我的评论，但您已经接受了一个答案，不过我还是会给出一个答案，因为我有一种感觉，您可能并不需要您拥有的所有ID。

让我们看以下示例代码：

<div id="card-1" onclick="doSomethingWithCard('card-1')">
   <h2 id="card-1-name">John Doe</h2>
</div>

这里的两个ID都可能是不必要的。许多人尝试通过将其ID传递给事件处理程序并使用getElementById来获取对触发事件的元素的引用。而实际上，this已经包含了一个引用：

<div onclick="doSomethingWithCard(this)">
   ...
</div>

一旦你有了这个参考，你可以使用getElementsbyTagName、CSS选择器（通常与JavaScript框架/库如jQuery一起使用）或XPath来访问元素内部，而不是它们的单独ID。如果所有项目都具有相同的内部结构并使用适当的元素（h2，h3，ul，form等）和类，则此方法效果最佳。

jQuery示例：

function doSomethingWithCard(card) {
   alert($(card).find("h2").text());
}

- RoToRa

---

+1 说得好。最好注意不必要的对象数量。 - radu florescu

Answer 2

我认为最终取决于用户的浏览器和个人系统。最好的方法可能是对您的目标用户群进行一些研究，了解他们使用的浏览器以及可用的内存量。您可以在本地环境中对应用程序进行分析（已经有讨论过这样做）。这将让您了解您正在使用多少系统资源与用户可用资源之间的差距。但考虑到HTML5等高度图形化的javascript内容的数量，我敢打赌，您需要显示大量数据才能使javascript性能成为您最大的难点（至少在最现代的浏览器中，如果您必须支持像IE6这样的东西，那么所有的赌注都会失效）。括号已关闭，抱歉给您带来困扰。

- dmcnelis

---

未闭合的括号让我感到不安。 - Stephan Muller

封闭的企业环境中，IE7是标准浏览器（呕吐），90%的人都在运行带有2GB RAM的Windows XP。我非常感谢不必支持IE6（只需支持IE7/IE8）。感谢提供分析链接-好主意。 - Reno