Web Tech

Question 1

What is DOM Reflow?

Answer 1

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