在 DOM 中存储数据答案

【问题标题】：Storing data in the DOM在 DOM 中存储数据
【发布时间】：2012-12-27 19:22:47
【问题描述】：

我有一个书籍列表，我想针对每本书存储数据，例如价格、数量、id、category id、尺寸、重量等

我正在考虑通过使用 data- 属性扩展表示列表中每本书的 li 元素来将所有这些存储在 dom 中。然后可以通过 javascript 直接使用这些数据。

但是，我读到访问 data- 属性在性能方面很慢。此外，我可以有同一本书的多个实例，所以我有点担心 html 的膨胀。

另一种方法是使用 JS 对象来存储每本书的数据。

所以我的问题是在前端、DOM 或 Javscript 中存储数据的最佳做法是什么？

提前致谢

【问题讨论】：

我不会使用 data- 属性，除非数据与它所连接的 DOM 节点有某种关联。我会使用 JS 对象来将数据与演示文稿分开。

标签： javascript performance dom custom-data-attribute

【解决方案1】：

将其存储在DOM 元素和将数据保存为JavaScript 对象之间的区别在于，在第一种情况下，您拥有数据和DOM 元素直接相关，而在第二种情况下，您需要以某种方式保留相似的数据和DOM 结构，以便保留与DOM 相关的数据。第二种情况听上去更容易出错，因为您必须确保 DOM 中的每个更改都反映在数据中（添加/删除/修改元素），并且数据中的每个更改都反映在DOM（添加/删除/修改数据成员）。

在data-* 的情况下，属性数据是直接从 DOM 访问的，因此两者已经绑定在一起，至少在我看来，这是一个更好的做法。但是，正如 cmets 中所述，data-* 属性会带来 DOM 检索开销。

就性能而言，两者都需要将数据存储在内存中，无论是作为DOM 元素属性还是作为JavaScript 对象。检索DOM 元素属性实际上更昂贵，但更方便。渲染不受data-* 属性的影响，因为它们没有任何功能意义。

【讨论】：

-1。 data-* 属性绝对会产生巨大的性能开销。 Web 开发的第一条规则：DOM 操作很慢。 使用 DOM 存储和访问数据是up to 30 times slower，而不是在原生 JS 对象中存储数据。
@josh3736 我的回答与 getAttribute/setAttribute 或 jQuery attr 相关，而不是与 HTML5 数据集检索相关。是的，它比您的示例提供的要慢，但不如数据集那么糟糕。
getAttribute 是性能图表上的黄色条，它仍然至少比原生选项慢一个数量级。此外，我链接的性能测试完全错过了 DOM 元素检索的成本，这也是极其昂贵的。
@josh3736 你带来了一些好处。我已经相应地修改了我的答案。

【解决方案2】：

选择实际上取决于您的应用程序架构和应用程序中的功能类型。如果您正在构建单页应用程序，我发现使用构造良好的 json 对象和良好的模板插件可以在功能方面提供更大的灵活性。

我发现在 json 中的 id 上索引数据，然后将该 id 存储在“data-”元素中，可以很好地响应浏览器事件（点击等），而无需搜索 JSON 结构。拥有 JSON 结构还可以更轻松地执行排序列表和其他全局操作等操作，而无需从 DOM 重建数据。当您使用类似 MVC 的框架或实现自己的“可观察”数据结构时，此方法也更好。

另一方面，如果您主要使用服务器端代码，并且页面中只有基本功能利用您的“数据”数据（例如在点击时显示图书详细信息或类似的简单内容），则可能使用“data-”属性来存储更多详细信息更简单。

【讨论】：

【解决方案3】：

data- 属性通常更多地用作将数据获取到 JavaScript（即从服务器端模板）中的一种方式，而不是用于存储数据的运行时位置。保存活动数据的更好位置是 JavaScript 对象，尤其是当您在脚本的生命周期中经常访问或操作它时。

这更符合 MVC 方法，其中数据存在于您的模型中，但可能在您的视图中表示。出于这个原因，一些较新的 MVC 框架（如 AngularJS）提供了两者之间的自动双向绑定。

【讨论】：

我承认，当脚本很小（