当前位置: 首页 > 面试题库 >

什么是DOM回流?

杜思远
2023-03-14
问题内容

我正在阅读有关两个CSS属性之间的区别display:nonevisibility:hidden并且遇到了 DOM重排 术语。

该声明是

display: none导致DOM回流,而visibility: hidden没有。

所以我的问题是:

什么是DOM重排及其工作方式?


问题答案:

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

回流发生在以下情况:

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

有关更多信息,请参见此处:重绘和重排:负责地操作DOM



 类似资料:
  • 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。(MDN) DOM (Document Object Model,文档对象模型) 是 W3C 制定的访问

  • 本文向大家介绍virtual dom是什么?相关面试题,主要包含被问及virtual dom是什么?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: 用JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中 当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异 把所记录的差异应用到所构建的真正的DOM树上,

  • 本文向大家介绍什么是虚拟DOM?相关面试题,主要包含被问及什么是虚拟DOM?时的应答技巧和注意事项,需要的朋友参考一下 虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的,在react,vue等技术出现之前,我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构,来达到更新 ui 的目的。 这种方式相当消耗计算资源,因为每次查询 dom 几

  • 问题内容: 谁能用JavaScript解释事件委托,它有什么用? 问题答案: DOM事件委派是一种机制,它通过事件“冒泡”(也称为事件传播)的魔术,通过单个公共父节点而不是每个子节点来响应ui事件。 在元素上触发事件时,将发生以下情况: 事件被调度到其目标,并且在该目标中 找到的所有事件侦听器都会被触发。 然后,冒泡事件将触发所有其他事件侦听器,这些事件侦听器可通过向上跟随父链来查找在每个连续上注

  • 本文向大家介绍dom是什么,你的理解?dom的api有哪些?相关面试题,主要包含被问及dom是什么,你的理解?dom的api有哪些?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就

  • 本文向大家介绍什么是回归测试?相关面试题,主要包含被问及什么是回归测试?时的应答技巧和注意事项,需要的朋友参考一下 更新新版本以后确保老版本的功能依然可以使用