什么是DOM回流？ [英] What is DOM reflow?

问题描述

我正在阅读两个css属性之间的区别 display：none 和 visibility：hidden DOM回流字词。

语句

display：none 会导致DOM回流，其中 visibility：hidden 不会。

所以我的问题是：

什么是DOM回流

元素上的回流重新计算元素的尺寸和位置，并且还触发对该元素的子元素，祖先元素以及在DOM中出现的元素的进一步回流。然后它调用最后的重绘。

回流发生在您：

• 插入，删除或更新DOM中的元素


• 修改网页上的内容，例如
移动DOM元素

• 动画处理DOM元素




• 更改CSS样式


• 更改元素的className


• 添加或删除样式表


• 调整窗口大小


• 滚动

有关详情，请参阅此处：重绘和回流：负责处理DOM

I was reading about difference between two css properties display:none and visibility:hidden and encountered DOM reflow term.

The statement was

display: none causes DOM reflow where is visibility: hidden doesn't.

So my question is:

What is DOM reflow and how it works?

解决方案

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

这篇关于什么是DOM回流？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！