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

Question

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

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

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

Answer 1

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

Answer 2

因为你这些都是同步的，你可以理解为执行完testDiv.style.height = 0;之后并没有重新渲染，而是执行完这个函数 到下个时间循环才会进行页面重新渲染，但是高度发现没变化，所以就没有回流。
可以了解下js的Event Loop