What is DOM reflow?

by

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

More Related Contents:

  1. How can I scale the content of an iframe?
  2. Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
  3. How to get a child element to show behind (lower z-index) than its parent?
  4. What are the CSS properties that get elements out of the normal flow?
  5. Change color of PNG image via CSS?
  6. Positions fixed doesn’t work when using -webkit-transform
  7. Can specific text character change the line height?
  8. Why does overflow:hidden not work in a ?
  9. What characters are allowed in DOM IDs? [duplicate]
  10. How can I make my flexbox layout take 100% vertical space?
  11. Making the main scrollbar always visible
  12. How to make HTML Text unselectable [duplicate]
  13. How to change one element while hovering over another
  14. Is it possible to have several different textcolors in one textarea?
  15. What is shadow root
  16. How to indent multiple levels of select optgroup with CSS?
  17. How to specify parameters to google chrome adobe pdf viewer?
  18. Make fill entire screen?
  19. Remove host component tag from html in angular 4
  20. How to load CSS Asynchronously
  21. How can you hide the arrow that is displayed by default on the HTML5 element in Chrome?
  22. How to change a span to look like a pre with CSS?
  23. Pseudo class :hover does not work in IE7
  24. Align a div to center
  25. Make Bootstrap’s Carousel both center AND responsive?
  26. Why is my .sticky-top class not working in Bootstrap 4?
  27. Use the HTML tag as a background image instead of the CSS background-image property?
  28. Make plus symbol in CSS
  29. Alignment of content vertically in adjacent flexbox containers
  30. Flex elements ignore percent padding in Firefox

Leave a Comment