What happens with display:none vs visibility:hidden in terms of reflow and repaint?

When using display:none, the element is completely removed from the document flow, meaning the browser does not allocate space for it. This leads to a reflow — recalculating the layout and sizes of other elements on the page, as the document structure changes. After reflow, a repaint occurs — repainting the visible part of the page.

When using visibility:hidden, the element remains in the document flow and occupies space, but becomes invisible. In this case, reflow does not occur because the sizes and positions of elements do not change. Only a repaint occurs to update the display and hide the element.

In summary:

• display:none — reflow + repaint
• visibility:hidden — only repaint

This is important to consider when optimizing performance and animations on the page.