What is DOM reflow?

Question

I was reading about the difference between two CSS properties display:none and visibility:hidden and encountered the DOM reflow term.

The statement was

display: none causes a DOM reflow whereas visibility: hidden does not.

So my question is:

What is DOM reflow and how does it work?

visibility: hidden keep object in space, so the browser has no need to recalculate dom element position — Hacketo
Simply said, DOM Reflow is when your browser needs to recalculate the position/size of you DOM elements in order to display a page. In your specific example, you probably noticed that a visibility: hidden element seems to still be there (the space needed to show it is still taken, it is still "in the flow", just invisible) while a display: none element takes your element completely out of the flow. — Laurent S.

Karlen Kishmiryan Karlen Kishmiryan · Accepted Answer · 2014-12-24T12:51:54

A reflow computes the layout of the page. A reflow on an element recomputes the dimensions and position of the element, and it also triggers further reflows on that element’s children, ancestors and elements that appear after it in the DOM. Then it calls a final repaint. Reflowing is very expensive, but unfortunately it can be triggered easily.

Reflow occurs when you:

insert, remove or update an element in the DOM

modify content on the page, e.g. the text in an input box

move a DOM element

animate a DOM element

take measurements of an element such as offsetHeight or getComputedStyle

change a CSS style

change the className of an element

add or remove a stylesheet

resize the window

scroll

For more information, please refer here: Repaints and Reflows: Manipulating the DOM responsibly

What is DOM reflow?

What is DOM reflow and how does it work?

3 Answers