为什么Chrome不需要在更改时重新绘制整个图层？

Question

为什么Chrome不需要在更改时重新绘制整个图层？

Dim*_*nis 19 css browser google-chrome repaint google-chrome-devtools

我试图在实践中理解Chrome的布局→绘图→复合管道是如何工作的.在我的测试中,我对Chrome在以下情况下的行为感到困惑.(Codepen)

var button = document.querySelector('button');
var red = document.querySelector('.red');
var blue = document.querySelector('.blue');
button.addEventListener('click', function() {
  red.classList.toggle('test');
})

Run Code Online (Sandbox Code Playgroud)

.wrapper {
  height: 100%;
  width: 100%;
  background-color: teal;
  position: static;
}

.square {
  height: 200px;
  width: 200px;
  position: static;
  transition: transform 0.3s ease,
    opacity 0.3s ease,
    width 0.3s ease,
    height 0.3s ease,
    box-shadow 0.3s ease;
}

.red {
  /* position: absolute; */
  background-color: red;
  top: 100px;
  left: 100px;
  /* will-change: transform; */
  opacity: 1;
}

.blue {
  background-color: blue;
  z-index: 3;
}

.test {
  /* transform: translate3d(50px, 50px, 0); */
  /* opacity: 0; */
  width: 60px;
  height: 60px;
  /* box-shadow: 0px 0px 0px 10px rgba(0,0,0,.5) */
}

button {
  position: fixed;
  right: 100px;
  top: 50px;
  z-index: 10000;
  font-weight: bold;
  background-color: yellow;
  padding: 5px 10px;
  /* will-change: transform; */
}

Run Code Online (Sandbox Code Playgroud)

<div class="wrapper">
  <div class="red square"></div>
  <div class="blue square"></div>
</div>
<button>Click</button>

Run Code Online (Sandbox Code Playgroud)

重现.

使用Chrome;
打开高亮重画上,在开发工具;
打开" 图层"面板;
单击黄色按钮切换红色方块的大小;
看看突出显示为"重新绘制"的内容,以及当前的图层;
在改变position红色方块之后尝试这样做.

我们在包装元素中有两个正方形,一个是红色,另一个是蓝色.在Chrome的" 图层"面板中,整个内容显示为一个图层.

如果两个方块都被static定位,当我转换红色的宽度和高度时,我可以看到整个层被重新绘制,这对我来说是有意义的,因为,如果所有3个元素都在同一层中,则更改尺寸为1,改变整个图层的最终结果,因此整个图层必须重新绘制.
如果我将红色方块设置为absolute定位(您可以通过取消注释.red样式规则中的线条来实现),当我转换其宽度和高度时,即使开发工具仍显示一个图层,只有该图层内的红色正方形,显示为重新绘制.

题.
第二种情况对我没有意义.

如果两个正方形和包装元素都在同一层中,那么不应该更改一个元素会影响整个图层并导致整个图层重新绘制,而不仅仅是红色正方形？

其他问题.
在布局阶段(或确定图层的任何阶段),Chrome是否会将某些元素分离到各自的图层中(position例如,由于属性)？这是为什么它能够分开重绘它们？在合成阶段之后,它是否会转储它们,因此开发人员只能在开发工具中看到一个图层？

相关背景.
我对现代浏览器绘画过程的粗略理解如下: