为什么transform with transition 会导致整个页面重绘？

Question

一、打开chrome devtools，触发

然后将鼠标悬停在第一个div，你会发现如果去掉transition属性，只重绘第一个div，但是如果添加transition属性，整个页面都会重绘，有没有人可以解释一下？

div {   
  width: 100px;   
  height: 100px;
}

div:first-child {   
  margin-bottom: 100px; 
}

div:first-child:hover {   
  transform: scale(1.4);   
  transition: all .3s;   
  background-color: red; 
}

<div> 11111111111111111 </div>
<div> 222222222222222222 </div>

JSFiddle 演示：https ://jsfiddle.net/heaven_xz/4q2kgr2g/5/

Answer 1

您应该做两件事来提高性能。

第一个是声明仅转换到您有兴趣更改的属性。

但是重绘问题的根源在于Chrome现在使用的是新样式will-change。如果你充分声明它，重绘现在将是你所期望的。

关于 Chrome 团队决定停止尝试自动优化并依赖开发人员声明它的原因，我真的不知道。

参考这里

div {   
  width: 100px;   
  height: 100px;
}

div:first-child {   
  margin-bottom: 100px; 
  will-change: transform, background-color;
}

div:first-child:hover {   
  transform: scale(1.4);   
  transition: transform .3s, background-color .3s;   
  background-color: red; 
}

<div> 11111111111111111 </div>
<div> 222222222222222222 </div>