当前位置: 首页 > 知识库问答 >
问题:

javascript - 为什么在JavaScript中设置高度为0再恢复不会造成页面闪烁?

柯昆杰
2024-11-05

让一个元素在一个事件里先让其高度设置自动,此时读取高度,因为读取属性在js中会造成回流,重新渲染页面,然后在设置高度为0,再次获取高度,重新回流,不应该会看到一个闪烁的情况么?为什么页面却不会闪烁?

  hoverDiv.addEventListener("mouseover", () => {
  testDiv.style.height = "auto";
  const { height } = domDIV.getBoundingClientRect();
  testDiv.style.height = 0;
  testDiv.getBoundingClientRect();
  testDiv.style.height = height + "px";
}

按照如上代码逻辑 回流后重新渲染页面 应该打开页面时会有一个闪烁的情况 。但是实际效果打开页面却不会闪烁?

共有1个答案

呼延聪
2024-11-05

回流后后面还会有多个步骤,比如重绘,合成什么的,并不是回流后页面就会立即响应渲染,不然的话页面这么多元素,一回流就渲染,那页面不一直闪烁

 类似资料:
  • 上述代码是我在进行 ramda 函数库的 pipe 实现过程中的代码。 我无法通过测试用例 performs left-to-right function composition 和 can be applied to one argument 我发现是因为我是实现的代码 f的长度都是0, 所以我想问什么原因造成的这个问题,如何解决? ramda - test -pipe

  • 任何关于报告源代码的其他信息,请在评论中让我知道。

  • 问题内容: 这有任何重要目的吗?可以省略吗? 问题答案: 并非总是必要的,但是它确实有其用途。假设我们想在基类上创建一个复制方法。像这样: 现在,当我们创建一个新的并复制它时会发生什么? 该副本不是的实例。这是因为(没有显式检查),我们无法从“基本”类返回副本。我们只能返回。但是,如果我们重置了构造函数: …然后一切都按预期进行:

  • 问题内容: 为什么在JavaScript中不推荐使用该属性? 它是在JavaScript中添加然后弃用的,但ECMAScript完全省略了它。某些浏览器(Mozilla,IE)一直都支持该浏览器,并且在地图上没有删除支持的计划。其他浏览器(Safari,Opera)已对此提供支持,但较旧的浏览器支持不可靠。 是否有充分的理由将这种有价值的功能置于边缘? (或者,是否有更好的方法来抓住调用函数的句柄

  • 问题描述 在测试下列代码: 根据定时器的相关规范,预测结果应该是: 1,2 因为第一个定时器先注册,在浏览器API或Node中完成计时后,进入宏任务队列,那么栈顶肯定是他;等for循环结束后,第二个定时器注册,并同样在完成计时后,进入宏任务队列;最后,执行宏任务队列,输出就应该是1,2。 实际测试结果: chrome:2,1 edge:2,1 firefox:1,2 node:1,2 测试环境 c

  • 使用window.open打开同源新tab,新页面localstorage中token丢失。

  • 如demo中所示的轮播图,使用下一页切换,在最后一页切换到第一页面时候,即循环切换时候,如果点击较慢(或多点几次),图片会出现闪动,为什么轮播回退会出现闪动?使用的是translate3d来移动的

  • 问题内容: 我希望轮播DIV(s7)扩展到整个屏幕的高度。我不知道为什么它不成功。 问题答案: 为了使百分比值适合身高,必须确定父母的身高。唯一的例外是 root 元素,它可以是百分比高度。。 因此,您已将除之外的所有元素赋予了高度,因此您应该添加以下内容: 而且您的代码应该可以正常工作。