为什么转换转换导致整个页面重新绘制？

Question

首先，打开chrome devtools，触发{{0}​​}

然后将鼠标悬停在第一个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现在正在使用新款式改变。如果你充分声明它，重绘将是你期望的。

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

参考here

＆＃13;

＆＃13;

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; 
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

此链接可以帮助解决问题。它给出了转换属性的详细说明。

Here's the link