Css 为什么Chrome不需要在一次更改中重新绘制整个图层？

我试图了解，在实践中，如何布局→ 油漆→ 铬厂复合管道。在测试过程中，我对Chrome在以下情况下的行为感到困惑

var-button=document.querySelector（'button'）；
var red=document.querySelector（'.red'）；
var blue=document.querySelector（'.blue'）；
addEventListener（'click'，function（）{
red.classList.toggle（'test'）；
})

.wrapper{
身高：100%；
宽度：100%；
背景色：青色；
位置：静态；
}
.广场{
高度：200px；
宽度：200px；
位置：静态；
转换：转换0.3秒轻松，
不透明度0.3s，
宽度0.3s，
高度0.3s，
盒影0.3s；
}
瑞德先生{
/*位置：绝对位置*/
背景色：红色；
顶部：100px；
左：100px；
/*改变：转变*/
不透明度：1；
}
蓝先生{
背景颜色：蓝色；
z指数：3；
}
.测试{
/*转换：translate3d（50px，50px，0）*/
/*不透明度：0*/
宽度：60px；
高度：60px；
/*长方体阴影：0px 0px 0px 10px rgba（0,0,0,5）*/
}
钮扣{
位置：固定；
右：100px；
顶部：50px；
z指数：10000；
字体大小：粗体；
背景颜色：黄色；
填充物：5px10px；
/*改变：转变*/
}

单击

所以，这里的困惑之处在于，dev工具的绘制闪烁只会闪烁从上一帧中失效的层的一部分（因此，如果一个

absolute

positioned square开始变小，则帧之间的无效区域是一个具有该square在前一帧中的尺寸和坐标的区域）

但是，在内部，整个层将被重新绘制，无论无效部分在帧之间有多大或多小

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

事实上，如果我们打开性能面板并启用“高级绘制工具”选项，我们可以看到在正方形过渡之间整个层在问题中描述的两种场景中都会被绘制

来源

一些观察结果

如果我们要最小化布局和绘制步骤以尽可能减少操作，我们应该将红色方块和黄色按钮分离到它们自己的渲染层

---

这种与按钮交互并调整正方形大小的方式只会影响它们各自的层，不会导致对背景层（包括背景和蓝色正方形）进行重新绘制.

您需要在您的问题中发布一个完整但最小的问题标记或代码示例，允许我们复制问题，而不是Codepen或任何其他第三方网站：您能澄清一下您的问题吗？您是在问整个过程是如何工作的吗？（需要几本完整的书来解释），还是你真的只关心你的

立场：绝对的
案例？（如果是这样，在网上简单搜索就足够了：）@Kaido我试着澄清一下。是的，我想我问的是整个过程，
position:absolute
只是一个例子。我问题的实质是为什么我只看到整个层中的一个元素被重新绘制，而不是整个层。也许我问错了，我不知道。OP问了这个问题。（/cc@Rob）感谢您在这里发布Chrome开发人员的答案，但请让他们下次在StackOverflow中回复。我们从真正了解情况的人那里得到的侧频道答案越少，整个社区就越能受益！我已经联系过他了。因为无法保证他会亲自发布答案，所以只能这样了现在，@DimitrisKaragiannis这是否意味着当页面中的所有元素都在一个根层中时，所有这些元素都会在该层上发生视觉变化时被绘制出来？比如说悬停按钮上的背景色？我觉得这听起来很疯狂。@behnil这是正确的！您可以打开devtools来尝试一下，然后自己看看f、 但是对于简单的页面来说应该没有问题，浏览器速度很快。如果你开始注意到结巴，你一定要尝试优化。@DimitrisKaragiannis我仍然不相信整个页面（在本例中为层）需要重新绘制。查看这篇文章，特别是关于矩形无效的部分。