ecometer

Make DOM elements invisible during modification

(Development)
#44

When several properties of a DOM (Document Object Model) element must be modified, each style or content change will generate a repaint or a reflow. It is therefore usually more economical to:
- make the element invisible (set display to none) (1 reflow) - modify the element properties and then make it visible again (1 reflow)

Thus resulting in a maximum of 2 reflows.

Proceed as follows:

var elem = document.getElementById('foo'); 
elem.style.display = 'none'; // Generate 1 reflow
elem.style.width        = '10em';
elem.style.height  = 'auto';
// ... other changes...
elem.style.display = 'block'; // Generate 1 reflow

In the end, only 2 reflows are needed instead of potentially 6 or 7.

This best practice should only be applied if it is coherent with your project's specifications.
Under CC-By-NX-SA license