How much data can be used for the data attribute in dom?

Question

Sometimes I would like to post decent information on a page to avoid additional AJAX calls for dynamic content. I wonder if you do this, if there is a penalty for execution, I have to be careful.

Answer 1

HTML5 spec has no limit on the amount of data in an attribute:

... without restrictions on the depth of the generated DOM tree or on the length of tag names, attribute names, attribute values, text nodes, etc.

The time taken to render the page depends on the length of the content, and thus any added content, such as a lot of data stored in attributes, will cause the page to load slowly. Retrieving data using javascripts getAttribute() will also be slower if the data is massive.

With ajax or / and a server storage solution, you can retrieve data as needed, making it much faster in many cases than storing everything in HTML.

How much is? It depends on what you are doing with the data, what data, etc., and it is almost impossible to answer. You, as a developer, will have to decide what to use, etc.

Answer 2

The clear answer is: it depends;) It depends mainly on how much data you put on the page. You have to fulfill the equation of the page loading with data packaging compared to the loading + another roundtrip server. Sometimes it’s better - perhaps for better usability - to quickly execute some kind of base / partial page and load additional content when necessary (cf. Lazy loading).

Performance tests will give you the right answer.

But also: why store data in dom? This is not the best place to store data on the client side. Why not use Javascript variables?