什么是DOM回流？

Question

我正在阅读两个css属性之间的区别display:none,visibility:hidden并遇到了DOM reflow term.

声明是

display: none导致DOM重排哪里visibility: hidden没有.

所以我的问题是:

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

Answer 1

一个回流计算页面的布局.元素上的重排会重新计算元素的维度和位置,并且还会触发该元素在DOM中出现的子元素,祖先和元素之后的进一步回流.然后它调用最后的重绘.回流非常昂贵,但遗憾的是它可以轻松触发.

当您:

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

有关详细信息,请参阅此处:重绘和重复:负责任地操作DOM

Answer 2

回流是Web浏览器进程的名称,用于重新计算文档中元素的位置和几何,以便重新呈现部分或全部文档.

https://developers.google.com/speed/articles/reflow

display:none隐藏div好像div没有渲染,而visibility:hidden只是隐藏,但空间仍然被占用