Search code examples
htmldomelementweb-performance

Can too many HTML elements affect page performance?

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.

Solution

  • 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.