在 dom 中放一个 data 属性可以放多少数据？ [复制]答案

【问题标题】：How much data is it okay to put on a data attribute in the dom? [duplicate]在 dom 中放一个 data 属性可以放多少数据？ [复制]
【发布时间】：2013-04-28 09:47:37
【问题描述】：

有时我想在页面上放置大量数据以避免对动态内容的额外 AJAX 调用。我想知道这样做是否会导致性能损失。

【问题讨论】：

是的，您的页面会更大，加载时间会更长。至少使用 AJAX 将允许使用 spin.js 之类的东西来防止用户认为页面根本没有加载。
整洁。因此，html5 没有硬性限制。这当然是部分答案，但并未解决问题的性能影响部分。
@Stephen 没错，但同样，多少太多了。我会认为，向页面添加几千字节可能不会影响页面加载时间。页面加载后，我对性能效果更感兴趣。
browsercookielimits.x64.me
@mikeclagg html5 数据属性不存储在 cookie 中，是吗？

标签： javascript html dom browser

【解决方案1】：

HTML5 spec 对属性中的数据量没有限制：

...对生成的 DOM 树的深度或长度没有限制标签名称、属性名称、属性值、文本节点等。

渲染页面所需的时间取决于内容的长度，因此任何添加的内容，例如存储在属性中的大量数据都会导致页面加载速度变慢。如果数据量很大，使用 javascripts getAttribute() 获取数据可能也会更慢。

使用 ajax 或/和服务器端存储解决方案，您可以根据需要检索数据，这在许多情况下比将所有内容存储在 HTML 中要快得多。

多少算太多？这取决于你对数据做什么，什么样的数据等等，几乎不可能回答。作为开发人员，您必须根据用例等做出决定。

【讨论】：

【解决方案2】：

一个明确的答案：这取决于 ;) 这主要取决于您在页面上放置了多少数据。您必须计算数据打包页面的初始页面加载与初始加载 + 另一个服务器往返的等式。有时最好——也许是为了更好的用户体验——快速交付某种基本/部分页面，然后在需要时加载其他内容（参见延迟加载）。

性能测试会给你正确的答案。

但除此之外：为什么要在 dom 中存储数据？这不是存储客户端数据的最佳位置。为什么不使用 Javascript 变量？

【讨论】：

为什么要在dom中存储数据？因为数据在模板绘制时可用，而不是在 javascript 编译时可用。
您可以使用隐藏元素来存储数据而不是属性，与属性相比，这应该减少您需要花费的转义和引用量。如果你保存了十几个小请求，最好在呼叫者在线时一次传输所有信息；它还可以实现更好的 gzip 压缩，以便对用于创建令牌池的十几个文件进行公共分组。通过捆绑信息，您可以获得 ajax 不提供的页内内容的 SEO 优势，并且在不稳定的连接上获得更好的用户体验。