Html 什么是 DOM 回流？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27637184/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is DOM reflow?
提问by eirenaios
I was reading about difference between two css properties display:noneand visibility:hiddenand encountered DOM reflowterm.
我正在阅读关于两个 css 属性之间的差异display:none，visibility:hidden并遇到了DOM 回流术语。
The statement was
该声明是
display: nonecauses DOM reflow where isvisibility: hiddendoesn't.
display: none导致 DOM 回流，而visibility: hidden不是。
So my question is:
所以我的问题是：
What is DOM reflow and how it works?
什么是 DOM 回流及其工作原理？
回答by Karlen Kishmiryan
A reflowcomputes 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
一个回流计算页面的布局。元素上的回流会重新计算元素的尺寸和位置，并且还会触发该元素的子元素、祖先元素和 DOM 中出现在它之后的元素的进一步回流。然后它调用最终重绘。回流非常昂贵，但不幸的是它很容易触发。
当您执行以下操作时会发生回流：
- 在 DOM 中插入、删除或更新元素
- 修改页面上的内容，例如输入框中的文本
- 移动一个 DOM 元素
- 为 DOM 元素设置动画
- 测量一个元素，例如 offsetHeight 或 getComputedStyle
- 更改 CSS 样式
- 更改元素的类名
- 添加或删除样式表
- 调整窗口大小
- 滚动
For more information, please refer here: Repaints and Reflows: Manipulating the DOM responsibly
有关更多信息，请参阅此处：重绘和回流：负责任地操作 DOM
回答by Vitorino fernandes
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.
Reflow 是 Web 浏览器进程的名称，用于重新计算文档中元素的位置和几何形状，以重新渲染部分或全部文档。
https://developers.google.com/speed/articles/reflow
https://developers.google.com/speed/articles/reflow
display:nonehide the divas if the divis not rendered whereas visibility:hiddenonly hides but the space is still occupied
display:none隐藏div好像div没有渲染而visibility:hidden只隐藏但空间仍然被占用
回答by degr
It means, that if you will set display: none;, your browser will recalculate positions of DOM elements, if visibility: hidden; - not. Think, it because visibility: hidden;does not change element sizes in DOM.
这意味着，如果您设置display: none;，您的浏览器将重新计算 DOM 元素的位置，如果可见性：隐藏；- 不是。想想吧，因为visibility: hidden;它不会改变 DOM 中的元素大小。
