Return to site

GREEN IT Developer 🌍💚: Make DOM elements invisible during modification

· greenIT

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:

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