CODEWITHSUNDEEP
htmlperformance
sharkyenergy
sharkyenergy

Reputation: 4173

complex HTML page sluggish

For network intern purposes I have a quite complex html page, consisting of about 5000 Div's, all with absolute positioning.

The page's source code is about 1Mb, and works as expected, except for the fact that it is very sluggish on scrolling.

Is there something that can be done to get better performance? such as tell the browser to rener only what is visible or something like that?

Disclaimer: I know that a page with 5000 div's is far from optimal, but it was the only solution that allowed everbody on the network to access this table without extra software and that gave enough flexibility in creating this.

Upvotes: 0

Views: 42

Answers (2)

Boldewyn
Boldewyn

Reputation: 82734

The stuff below is just fighting symptoms, you really should try to re-structure your HTML. Especially there's nothing much to optimize for the browser, if it's forced to recalculate 5000 absolutely positioned elements' positions.

Also you need to test each of the following techniques, to see, if it really improves something with regard to your local browser array. (Chances are, that some of these tips will be counter-productive in your special set-up.)

Upvotes: 2

Ovidiu Pacurar
Ovidiu Pacurar

Reputation: 8209

I believe that you can compute in javascript what divs are visible because your divs have absolute position.

You can try to start with all cells that are not on the first column having display: none, so the browser computes the height, and then set display: block only on those that are "visible".

As the user scrolls, use javascript to control the display attribute and so the browser computes and paints only the cells in view, and the ones that are on the first column.

It sounds complicated, and it is, but it will be fast even in older browsers.

Upvotes: 0

Related Questions