Zoltán Tamási Zoltán Tamási - 1 month ago 10
HTML Question

Performance overhead of HTML attributes

I have a relatively huge data grid, containing let's say 100 columns and 100 rows. Hence there are 10.000 data cells, aka

td
elements in the
table
.

Let's say for application logic reasons I'd like to add
data-*
attributes to these cells, like
data-fieldname
, etc.

I was thinking about the overall performance impact of having 10.000 attributes defined on 10.000
td
elements. Can anyone point out the exact behavior of the major browsers when it comes to this scenario?

To be more concrete, I'm asking if defining
data-*
attributes affect DOM loading or rendering time, and on the other hand, how are these attributes stored, how big is the used memory impact.

My question is rather theoretical than practical, so please don't comment or answer about different alternatives.

Answer

If the properties don't change how the page gets rendered, then you will either don't have any or just a very slight performance difference. You will use a bit more memory though. Not so much that it would cause problems, but if you need to download it with a very slow internet speed, then you may have a bit öf speed decrease. (If you use chrome, you should test the page with net speed throttling. I'm not sure about firefox)

If you create every element manually, then adding a bonus property would only add a small difference, as you already need to create every element and put ither attributes on them.

Comments