转换/不透明度属性是否调用浏览器传输程序中的绘制步骤？

Question

在研究浏览器的呈现工作方式时，我注意到在带有启用标志的chrome工具中，paint flashing触发了更改transform/opacity属性的画图步骤。

使用代码查看这些屏幕截图：

示例1 (**transform/opacity** 属性)

let elem = document.querySelector(".newLayer");
let count = 0;
function anim(){
  elem.style.transform = `translate(${count}px,0)`;
  /// interchangeable
  /// elem.style.opacity = `${count/500}`;
  if(count++ < 500)
    requestAnimationFrame(anim);
  }
anim();

.newLayer{
  position:relative;
  width:150px;
  height:150px;
  background-color: red;
}

<div class="newLayer">I am a new Layer</div>

​

带有will-change**)**的示例2 (**transform/opacity** 属性)

let elem = document.querySelector(".newLayer");
let count = 0;
function anim(){
  elem.style.transform = `translate(${count}px,0)`;
  /// interchangeable
  /// elem.style.opacity = `${count/500}`;
  if(count++ < 500)
    requestAnimationFrame(anim);
  }
anim();

.newLayer{
  will-change: transform;
  position:relative;
  width:150px;
  height:150px;
  background-color: red;
}

<div class="newLayer">I am a new Layer</div>

​

这让我感到困惑，因为我已经看到了这一个和这一个的来源，他们说当你使用transform/opacity时，油漆阶段已经结束了。那么这是什么呢？为什么我们在第一个例子中看到油漆，而在第二个例子中看不到？哪一个在撒谎？

有趣的一个例子，有两个油漆操作：

​

let elem = document.querySelector(".newLayer");
let count = 0;
function anim(){
  elem.style.left = `${count}px`;
  if(count++ < 500)
    requestAnimationFrame(anim);
  }
anim();

.newLayer{
  position:relative;
  width:150px;
  height:150px;
  background-color: red;
}

<div class="newLayer">I am a new Layer</div>

​

是的，有使用的定位属性，但是看看油漆操作，一条大条，一条小条，比如在没有will-change的示例中。这是什么意思(我指的是带有小条纹长度的油漆)？

小油漆块和光栅线有关吗?大的怎么样？

Answer 1

这两个例子都不是谎言。

浏览器最大限度地减少了组合在一起所需的层数。只有当它有理由相信会有好处时，它才会创建一个图层。

如果您使用CSS转换、CSS动画或web动画来动画转换或不透明，浏览器会提前知道元素是以一种可能通过创建层来优化的方式动画的，因此Chrome会在动画期间创建一个。

如果您使用rAF动画，浏览器就没有这个远见。will-change的存在是为了向浏览器提示它应该为这个元素创建一个层，这取决于不断变化的属性。

这些都是提示，浏览器不能保证创建一个层。在其他情况下，有些浏览器会创建一个层，例如当另一个元素需要在一个层的顶部绘制时，以及在其他一些CSS (如transform: translateZ(…) )的情况下。