Can too many HTML elements affect page performance?

Question

i wonder if there's a difference between 1.) 10,000 tablerow which is visible 2.) 10,000 tablerow which is hidden using display:none

what i want to know is that. if all 10,000 row is visible on the page, could it cause the page scrolling to lag?

but if i hide for example the 9000 of them. could this reduce the lagging? Thanks guys.

Pontonier

Not an answer, but an observation, if you need to load 10,000 rows all at once, you're probably doing it wrong. – Anent

You should probably be doing some form of pagination. As Luke said - you're probably doing it wrong. You should also be able to easily test this for yourself because if you know how to make one row then you can make 10,000 with a for loop. – Casmey

Your question is to broad. There isn't enough information to be able to answer your question. Is it a simple 3 column table with some 5 digit numbers in each cell, then the answer is it makes no difference except to the initial loading when using a PC. The other end of the scale is if the table was say 40 columns wide and each cell had unique JavaScript code to generate graphic contents of each cell, I would imagine it might improve scrolling by hiding most of the cells. Also what have you done to find out so others don't waste time? – Enactment

Answer 1

In general display: none; will save the browser some work.

The browser will start by parsing your HTML and building the so called DOM (document object model), when all the CSS is received it will go on and build the CSSOM (CSS object model). Those two combined will give the render tree.

With the render tree in hand the browser will perform a layout step (deciding where each element goes on the screen and how big it will be) and then paint the page on the screen.

When combining DOM and CSSOM to become the render tree, however, the browser will discard all subtrees that are display: none; and thus, have less work to do in the layout and paint step.

Rubberneck

Answer 2

Great question! It is not too broad, it is not discussed enough. I'm in the middle of researching this based on a lazy-loading issue I'm having and cross-referencing other websites like Twitter and Reddit feeds.

Lighthouse flags pages with DOM trees that:

• Have more than 1,500 nodes total.
• Have a depth greater than 32 nodes.
• Have a parent node with more than 60 child nodes.

For example I see that Reddit scores a dismal 26.
"Avoid an excessive DOM size 1,456 elements" is included as a recommended action.

Reddit.com: Lighthouse says:

A large DOM will increase memory usage, cause longer style calculations, and produce costly layout reflows. Learn more. React Consider using a “windowing” library like react-window to minimize the number of DOM nodes created if you are rendering many repeated elements on the page. Learn more. Also, minimize unnecessary re-renders using shouldComponentUpdate, PureComponent, or React.memo and skip effects only until certain dependencies have changed if you are using the Effect hook to improve runtime performance.

https://web.dev/dom-size/#how-to-optimize-the-dom-size

Kunlun

Is there any vanilla js equivalent as react-window? Thanks – Abroach

I don't ever use React but I added that statement because it has been argued here that this issue is irrelevant. I recommend not using any automated tool to minimize DOM node output but rather figure out how to manually output less HTML eg. virtual DOM scrolling. – Kunlun

Answer 3

Just ran into this question and wanted to put my 2 cents as well

• even though modern browsers get smarter on fast rendering and machines are getting faster, the best practice still stand that don't render too many table rows. Use pagination.
• it also depends how you render your table rows. If you're using JS to render it, it will definitely have a negative impact on scroll performance. There are very good js templating solutions you can minimize js execution overhead. Call me old-school but I rather using less js rendering on the client.

Ectoparasite