我在阅读两个CSS属性display:nonevisibility:hidden之间的区别时遇到了DOM reflow术语.

声明是

display: none会导致DOM回流,而visibility: hidden不会.

所以我的问题是:

什么是DOM回流?它是如何工作的?

推荐答案

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

回流发生在以下情况:

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

欲了解更多信息,请参考此处:Repaints and Reflows: Manipulating the DOM responsibly

Css相关问答推荐

CSS子网格不显示行间距

使用最小高度和边框使阴影DOM中的元素达到自定义元素高度的100%,如果溢出,还可以zoom 父元素

媒体查询在生产中没有响应:React 18 应用程序

尽管 URL 路径正确,但背景图像未显示

当值小于 1 时理解 flex-shrink

.SVG 文件对象在锚标签下可点击

如何更改导航栏标题中链接的文本 colored颜色 和导航丸中的链接(在shiny 的应用程序中)?

Ant Design:将位置子菜单移动到屏幕顶部

如何将数据从样式化组件发送到函数?

适合剩余高度

在响应式设计中指定 HTML 文本中的首选换行点

绝对位置和溢出:隐藏

Bootstrap 3 - 在每个网格列之后打印布局和中断

CSS设置宽度以填充剩余区域的百分比

在 Vuejs 中拥有全局 CSS 的最佳方式

将 Web 字体转换和渲染为 base64 - 保持原始外观

如何在 iOS 上获取带有 CSS 溢出的滚动条

内联块列表项中不需要的边距

HTML表格:保持列的宽度相同

CSS 否定伪类 :not() 用于父/祖先元素