javascript - 在 dom 中放一个 data 属性可以放多少数据？

Question

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

score 5 · Accepted Answer

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

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

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

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

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

score 0 · Accepted Answer

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

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

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

2 回答 2