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

问题描述

我正在阅读两个 CSS 属性 display:none 和 visibility:hidden 之间的区别，并遇到了 DOM reflow 术语.>

声明是

<块引用>

display: none 会导致 DOM 重排，而 visibility: hidden 不会.

所以我的问题是:

什么是 DOM 回流及其工作原理?

解决方案

reflow 计算页面的布局.元素上的回流会重新计算元素的尺寸和位置，并且还会触发该元素的子元素、祖先元素和 DOM 中出现在它之后的元素的进一步回流.然后它调用最终重绘.回流非常昂贵，但不幸的是它很容易触发.

回流发生在您:

• 在 DOM 中插入、删除或更新元素
• 修改页面上的内容，例如输入框中的文本
• 移动一个 DOM 元素
• 为 DOM 元素设置动画
• 测量一个元素，例如 offsetHeight 或 getComputedStyle
• 更改 CSS 样式
• 更改元素的类名
• 添加或删除样式表
• 调整窗口大小
• 滚动

有关更多信息，请参阅此处:重绘和回流:负责任地操作 DOM

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: none causes a DOM reflow whereas visibility: hidden does not.

So my question is:

What is DOM reflow and how does it work?

解决方案

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屋！