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, Dec 24 '14 at 12:51
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., Dec 24 '14 at 12:53

score 134 · Accepted Answer · edited Aug 07 '17 at 06:42

134

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

edited Aug 07 '17 at 06:42

SLePort

15,211
3
34
44

answered Dec 24 '14 at 12:51

Karlen Kishmiryan

7,322
5
35
45

3

animating a DOM element not necessarily trigger reflow, for eg. if you are using CSS3 property to transform, reflow doesn't happen – Nitish Jan 16 '17 at 18:37
4

Changing `visibility` to `none` is not a CSS style change? – Qwerty Sep 26 '17 at 19:40
1

@Qwerty There are lots of style changes, which can cause reflow, so I guess that's why they are saying "change a CSS style" globally. – Karlen Kishmiryan Dec 19 '18 at 07:48
1

What about adding a CSS variable as inline style? e.g. `` – ifthenelse Nov 23 '21 at 15:18

score 17 · Answer 2 · answered Dec 24 '14 at 12:51

Reflow is the name of the web browser process for re-calculating the positions and geometries of elements in the document, for the purpose of re-rendering part or all of the document.

https://developers.google.com/speed/articles/reflow

display:none hide the div as if the div is not rendered whereas visibility:hidden only hides but the space is still occupied

score 1 · Answer 3 · edited Aug 08 '19 at 07:13

1

It means, that if you will set display: none;, your browser will recalculate positions of DOM elements, if visibility: hidden; - not. Think, it because visibility: hidden; does not change element sizes in DOM.

edited Aug 08 '19 at 07:13

Suresh Karia

17,550
18
67
85

answered Dec 24 '14 at 12:51

degr

1,559
1
19
37

What is DOM reflow?

What is DOM reflow and how does it work?

3 Answers3

Linked