javascript - 在包含许多元素的页面中更喜欢 id 属性还是 data 属性？

Question

我正在创建一个包含很多很多“小部件”的 HTML 页面(数量级可以达到 1000，其中很多是 display:none 不可见的，它们会通过用户交互动态修改)。< br/>每个小部件都必须携带一些有关它的信息。

目前我正在逐个构建 DOM，并向每个小部件添加一个 jQuery .data()。但是这种构建小块的速度太慢(在解析 HTML 上花费了大量时间)，所以我想切换到一种新方法，我首先构建一个包含所有小部件的字符串，然后使用 innerHTML< 将其添加到 DOM 中 一气呵成。但这不允许我在构建过程中再使用 .data()。

因为所有的小部件都有一个唯一的 ID(目前只存储在 .data()...)我可以想到两个明显的解决方案:

1. 给每个小部件一个id属性，以小部件ID作为内容
2. 给每个小部件一个data-widgetid属性，并将ID作为内容

(与此同时，我有一个很大的 JavaScript 散列，将 widget-id 链接到每个 widget 数据。)

我应该选择哪种方法？

性能和资源是一个问题(在移动设备上也是如此)。
通过 id 属性，我正在干扰 DOM，所以我不知道这是否会产生任何负面影响。 (例如，可能是浏览器开始在内部为此构建一个额外的查找结构，否则我可以避免。我不是浏览器开发人员，所以我不知道情况是否如此)

Answer 1

使用 ID。如果要保护 DOM 的 ID namespace ，请使用前缀。例如，其中“123”是唯一 ID。如果您的应用程序由数据库驱动，则主键可以方便地提供不冲突的 ID 值。否则使用客户端计数器生成唯一 ID。

通过 document.getElementById 按 ID 访问元素要快得多。现代浏览器允许这种访问非常快。与自定义属性相比，内部存储也更有效。要访问自定义属性，您必须遍历所有匹配的节点并将它们与自定义属性的值进行比较。一些旧的 IE 也不支持自定义属性。