What is DOM reflow?

a 夏天 提交于 2019-11-26 12:51:19
Karlen Kishmiryan

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

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

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!