我在阅读两个CSS属性display:none
和visibility:hidden
之间的区别时遇到了DOM reflow术语.
声明是
display: none
会导致DOM回流,而visibility: hidden
不会.
所以我的问题是:
我在阅读两个CSS属性display:none
和visibility:hidden
之间的区别时遇到了DOM reflow术语.
声明是
display: none
会导致DOM回流,而visibility: hidden
不会.
所以我的问题是:
reflow计算页面的布局.元素上的回流会重新计算该元素的尺寸和位置,并且还会触发DOM中该元素的子元素、祖先和出现在该元素之后的元素上的进一步回流.然后它会调用最后一次重新粉刷.回流是非常昂贵的,但不幸的是它很容易被触发.
回流发生在以下情况:
- 在DOM中插入、删除或更新元素
- 修改页面上的内容,例如输入框中的文本
- 移动DOM元素
- 为DOM元素设置动画
- 测量诸如OffsetHeight或getComputedStyle之类的元素
- 更改CSS样式
- 更改元素的类名
- 添加或删除样式表
- 调整窗口大小
- 纸卷
欲了解更多信息,请参考此处:Repaints and Reflows: Manipulating the DOM responsibly