dom中的data属性可以放置多少数据?

How much data is it okay to put on a data attribute in the dom?

本文关键字：多少数据中的 data 属性 dom 更新时间：2023-09-26

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

HTML5规范对一个属性中的数据量没有限制:

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

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

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

多少算太多?这取决于你对数据的处理方式、数据类型等，几乎无法回答。作为开发人员，您必须根据用例等来决定。

一个明确的答案:看情况;)这主要取决于你在页面上放了多少数据。您必须对数据打包页面的初始页面加载与初始加载+另一次服务器往返进行计算。有时候，也许为了更好的用户体验，最好是快速提供一些基本/部分页面，然后在需要时加载额外的内容(参见延迟加载)。

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

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