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

新手上路,请多包涵

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

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

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

阅读 751
1 个回答

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

推荐问题
宣传栏