为什么我在更改和检索元素位置时看不到 layout/reflow 被触发？

Question

我一直在尝试使用 Chrome Dev Tools 了解有关何时触发 layout/reflow 的更多信息。我在 JSFiddle 中设置了这个简单的示例，我在 for 循环中一次一个地更改一组 div 的“左”位置。然后，我立即检查“左”属性，据我所知应该强制布局（因为浏览器必须重新计算元素的位置才能提供更新的值）：

JavaScript:

const colors = document.body.querySelectorAll("div") 

const button = document.querySelector(".my-button")
button.onclick = handleClick

function handleClick () {
 colors.forEach(color => {
    color.style["left"] = "50px"
    const left = color.style["left"]   <--- This should force a Layout since "left" was just updated
 })  
}

HTML:

<html>
  <head>
  </head>
  <body>
    <button class="my-button">
      Click
    </button>
    <div class="red-color">
      red
    </div>
    <div class="blue-color">
     blue
    </div>
    <div class="green-color">
      green
    </div>
    <div class="yellow-color">
      yellow
    </div>
    <div class="black-color">
      black
    </div>
  </body>
</html>

CSS:

div {
  position: relative
}

在开发工具中，我期望看到在 for 循环的每次迭代中，都会触发布局。具体来说，我正在寻找位于黄色函数调用栏（应对应于 handleClick 回调）下方的紫色布局栏（每次迭代一个）。相反，它看起来像是在调用 handleClick 之后发生的单个布局：

以下是我的问题：

为什么我在操作 div 元素的位置并立即检查它们的新位置时，在 handleClick 期间看不到任何布局被触发？
我是否应该期望在 for 循环的每次迭代中看到触发新布局？我会这样认为，因为浏览器需要在每次迭代时提供更新的“左”位置。

Answer 1

检查Element.style.property值不会触发回流编号。该值不是“计算值”，不需要重新计算布局。

const target = document.querySelector(".target");

target.style.left = "0px";

// logs "0px"
// even though the real computed value is "25px"
// from the !important rule in CSS
console.log( target.style.left );

target.classList.remove("begin");
target.style.left = "250px";
// now the computed style is correctly 250px
// but since we didn't trigger a reflow
// the transition doesn't kick in

.target {
  transition: left 2s;
  width: 50px;
  height: 50px;
  background: salmon;
  position: absolute;
}
.begin {
  /* will take precedence over the .style rule */
  left: 25px !important;
}

<div class="target begin"></div>

也许您将它与 getComputedStyle(element).property 混淆了，这会导致回流：

const target = document.querySelector(".target");

target.style.left = "0px";
// this triggers a reflow, the transition will kick in
console.log( getComputedStyle(target).left );
target.style.left = "250px";

.target {
  transition: left 2s;
  width: 50px;
  height: 50px;
  background: salmon;
  position: absolute;
}

<div class="target"></div>

为什么我在更改和检索元素位置时看不到 layout/reflow 被触发？

Why don't I see layout/reflow being triggered when changing and retrieving element positions?

javascript

reflow

google-chrome-devtools