How can I reduce page reflows when using JavaScript widgets?

Question

A lot of JavaScript libraries have user interface widgets.

Usually they are created after the page is loaded. The user sees a page re-flow and parts of the page shift around or change appearance.

How can I reduce the amount of reflowing that occurs when a page loads, especially if I’m using several widgets?

Here’s some examples. These are really basic so the reflow isn’t so bad, but it’s there, especially with a cleared cache and a slow Internet connection:

• YUI 3: The main paragraph shifts down after the menu nav element loads.
• BBC Glow: The logos load as a vertical list and then change to a Carousel control.
• YUI 2: The table appears plain and then suddenly changes appearance.
• jQuery DataTables Plugin: The whole table appears, plain, before being restyled and paginated.

Answer 1

You can:

a) Hide visibility of an element (e.g. applying "hidden" value to its "visibility") that constitutes a widget until it's being fully initialized.

b) Initialize widget earlier than window's "load" event happens, such as on "DOMContentLoaded" event in supporting clients. This might minimize any flickering.

Answer 2

Wrap everything into invisible <div>. Then make it visible on page complete load (using onLoad event).

Answer 3

The problem when you use most 3rd party scripts is they will do all of the dirty/busy work for you in the JavaScript code of adding the classes or reformatting the HTML.

The only way to get around the redraw of the page is to either do what the others suggest of hiding and showing OR you have to have the HTMLfor the controls there already with the css classes enabled and the HTML properly marked up.

When I code widgets, I build that functionality in. I say to the developers that they can do the minimalist mark-up if they do not care about the flash of content or they can code their backend to spit out the spefic HTML mark-up the widget needs.

I do not think the scripts you listed have the ability to have the code marked up already, so you might be stuck living with the flash of content or doing the hiding. [The hiding may even screw up the scripts that rely on positioning data when rendering!]