Keep repaint (appearance) and reflow (layout) to a minimum


A repaint is a change in appearance of a DOM (Document Object Model) element, while a reflow is a change/recalculation of the position of the elements in the DOM. You should avoid triggering these two operations as they are resource-expensive, especially in terms of CPU usage.

To avoid repaint, to not change an element’s style properties (background color, border style, text color, size).
To avoid reflow, minimize changes to the position, size, type, position and content, etc. This is particularly appropriate for some HTML elements such as tables for which a reflow can take up to three times longer than an equivalent element with a block display.
Further reading:

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