变换/不透明属性是否调用浏览器传送带中的绘制步骤-前端问题

Does transform/opacity property invoke paint step in the browser conveyor(变换/不透明属性是否调用浏览器传送带中的绘制步骤)

本文介绍了变换/不透明属性是否调用浏览器传送带中的绘制步骤的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在调查浏览器的呈现工作原理时，我注意到，在启用了标志的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>

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

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>

它把我搞糊涂了，因为我看过this one和this one来源，他们说当您使用transform/opacity时，忽略了绘制阶段。那是什么呢？为什么我们在第一个例子中看到了油漆，而在第二个例子中没有呢？哪一个在撒谎？

有趣的一个包含2个绘制操作的示例：

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>

是的，有定位的Used属性，但请看绘制操作，一个大条纹和一个小条纹，如没有will-change的示例。这是什么意思(我说的是细小条纹长度的油漆)？

小漆挡路跟栅格线有关吗，大的呢？

变换/不透明属性是否调用浏览器传送带中的绘制步骤

问题描述

推荐答案

基础教程推荐