is too many element in the HTML can affect the 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.

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.

Answer 2

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.