Menu
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: nonecauses a DOM reflow whereasvisibility: hiddendoes not.
So my question is:
543
Force reflow (or Layout Reflow) is a major performance bottleneck. It happens when a measurement of the DOM happens after a DOM mutation.
A repaint, or redraw, goes through all the elements and determines their visibility, color, outline and other visual style properties, then it updates the relevant parts of the screen. A reflow computes the layout of the page.
Supporting the reflow of content is also known as 'Responsive Web Design'. It is enabled by CSS media queries which reformat the web content for different viewport widths (at particular break points) in order to provide optimised layouts for mobile devices such as tablets or smartphones.
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
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
