Performance utility classes - A table with 1000 rows

[jenstornell]

Let's say we have a table or a grid with 1000 rows with 20 columns each. How does that affect performance? The duplication for the developer is already taken care of by using components.

What about the duplication for the browser to read?

A small part of a possible grid / table

<div class="truncate border-r border-b border-gray-500">2</div>
<div class="truncate border-r border-b border-gray-500">3</div>
<div class="truncate border-r border-b border-gray-500">4</div>
<div class="truncate border-r border-b border-gray-500">5</div>
<div class="truncate border-r border-b border-gray-500">6</div>
<div class="truncate border-r border-b border-gray-500">7</div>

Any studies on performance and html, expecially with many classes on each element?

My hope is that the browser can be smart and somehow bundle things together in a cache. Computers usually is good at compressing things that are exactly the same.

[adamwathan]

I haven't seen any concrete numbers or benchmarks but my understanding is that the browser actually renders this sort of thing faster than if you had more complex CSS. Would be interesting to see someone put together some examples to actually prove/disprove though.

[jenstornell]

When thinking more about it my theory is this:

• More HTML = Consume more memory. A nobrainer for the computer to handle but because it's a lot of code it takes up more memory.
• More CSS = Require more processor. Harder for the computer to calculate but because it's smaller than lots and lots of HTML it will take up less memory,

I'll keep this question if someone will make a benchmark.

[adamwathan]

Some interesting conversation in this podcast about it (search the transcript for "performance"):

https://changelog.com/podcast/272