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

Question

我试图在实践中理解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');
})

.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; */
}

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

重现。

• 使用Chrome;
• 在开发工具中启用突出显示重新绘制;
• 打开图层面板;
• 点击黄色按钮切换红色正方形的大小;
• 查看突出显示为“重新绘制”的内容，以及当前图层;
• 在更改红色方块的position后尝试执行此操作。

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

• 如果两个正方形都被定位static，当我转换红色正方形的宽度和高度时，我可以看到整个图层都被重新绘制，这对我来说是有意义的，因为，如果所有3个元素都在同一层中，改变一个层的尺寸，改变整个层的最终结果，因此整个层都必须重新绘制。

• 如果我将红色方块设置为absolute定位（您可以通过取消注释.red样式规则中的线条来实现），当我转换其宽度和高度时，即使开发工具仍然显示一个图层，只有该图层内的红色方块显示为重新绘制。

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

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

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

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

• 在布局阶段，浏览器将CSS与HTML信息结合起来，以便在屏幕上找出视觉元素的位置和尺寸。我也相信这是决定渲染层数的时间（例如will-change）。
• 在绘画阶段，浏览器为每个图层制作一个帧缓冲，包含有关每个像素应显示的颜色的信息，基于布局数据。
• 在合成阶段，GPU根据绘画阶段生成的数据将所有图层合成在一起，并将最终结果发送到屏幕。

Answer 1

所以，这里令人困惑的一点是，开发工具的 Paint flashing 只会闪现从前一帧中失效的图层部分（如果是absolute定位方块开始变小，帧之间的无效区域是一个区域，其中的方形具有前一帧中的方形尺寸和坐标。）

然而，无论在帧之间无效的部分有多大或多小，内部整个层都会被重新绘制。

因此，例如，闪烁的光标在 Paint Flashing 上看起来很小，但实际上整个图层需要重新绘制。

实际上，如果我们打开 Performance 面板并启用高级绘画仪器选项，我们可以看到在方形过渡之间整个层被绘制在问题中描述的两种情况中。

<强>来源

https://twitter.com/paul_irish/status/971196975013027840
https://twitter.com/paul_irish/status/971196996924030977
https://twitter.com/paul_irish/status/971197842713800704

一些观察

如果我们要尽量减少布局和绘画步骤以尽量减少操作，我们应该将红色方块和黄色按钮分开到它们自己的渲染层。

这种方式与按钮交互并调整方块大小只会影响它们各自的图层，并且不会重新绘制背景图层（包括背景和蓝色方块）。