我正在创建一个包含很多很多“小部件”的 HTML 页面(数量级可以达到 1000,其中很多是 display:none
不可见的,它们会通过用户交互动态修改)。< br/>
每个小部件都必须携带一些有关它的信息。
目前我正在逐个构建 DOM,并向每个小部件添加一个 jQuery .data()
。但是这种构建小块的速度太慢(在解析 HTML 上花费了大量时间),所以我想切换到一种新方法,我首先构建一个包含所有小部件的字符串,然后使用 innerHTML< 将其添加到 DOM 中
一气呵成。但这不允许我在构建过程中再使用 .data()
。
因为所有的小部件都有一个唯一的 ID(目前只存储在 .data()
...)我可以想到两个明显的解决方案:
- 给每个小部件一个
id
属性,以小部件ID作为内容 - 给每个小部件一个
data-widgetid
属性,并将ID作为内容
(与此同时,我有一个很大的 JavaScript 散列,将 widget-id 链接到每个 widget 数据。)
我应该选择哪种方法?
性能和资源是一个问题(在移动设备上也是如此)。
通过 id
属性,我正在干扰 DOM,所以我不知道这是否会产生任何负面影响。 (例如,可能是浏览器开始在内部为此构建一个额外的查找结构,否则我可以避免。我不是浏览器开发人员,所以我不知道情况是否如此)
最佳答案
使用 ID。如果要保护 DOM 的 ID namespace ,请使用前缀。例如,其中“123”是唯一 ID。如果您的应用程序由数据库驱动,则主键可以方便地提供不冲突的 ID 值。否则使用客户端计数器生成唯一 ID。
通过 document.getElementById 按 ID 访问元素要快得多。现代浏览器允许这种访问非常快。与自定义属性相比,内部存储也更有效。要访问自定义属性,您必须遍历所有匹配的节点并将它们与自定义属性的值进行比较。一些旧的 IE 也不支持自定义属性。
关于javascript - 在包含许多元素的页面中更喜欢 id 属性还是 data 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28005347/