Javascript 在dom中的数据属性上放多少数据是可以的？

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

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

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

呈现页面所需的时间取决于内容的长度，因此任何添加的内容（如属性中存储的大量数据）都会导致页面加载速度变慢。如果数据量很大，使用javascripts

getAttribute（）

获取数据的速度可能也会较慢

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

---

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

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

性能测试将为您提供正确答案

---

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

是的，您的页面将更大，加载时间更长。至少使用AJAX将允许使用类似spin.js的东西来防止用户认为页面根本没有加载。因此，html5没有硬性限制。这当然是一个部分答案，但并没有解决问题的性能影响部分。@Stephen这是真的，但多少才算太多。我认为，在页面中添加几千字节可能不会影响页面加载时间。我对加载页面后的性能效果更感兴趣。@mikeclagg html5数据属性不存储在Cookie中，是吗？为什么将数据存储在dom中？因为数据在模板绘制时可用，而不是在javascript编译时可用。您可以使用隐藏元素来存储数据，而不是属性，这将减少与属性相比所需的转义和引用量。如果你保存了十几个小请求，最好在来电者在线时一次传输所有信息；它还支持更好的gzip压缩，以便对这十几个文件进行公共分组，从中创建令牌池。通过捆绑信息，您可以从ajax不提供的页面内内容中获得SEO好处，而且在零散的连接上使用ux更好。