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

【问题标题】：Why does transform with transition cause the whole page to repaint?为什么transform with transition会导致整个页面重绘？
【发布时间】：2018-08-14 09:34:36
【问题描述】：

首先，打开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/

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website doesn't work can I just paste a link。
这很难回答，除了那些确实构建了 Chrome 闪光绘画工具的工具，以及那些确实构建了 Chrome 绘画算法的工具。例如，FF 不会那样做。

标签： html css google-chrome css-transitions

【解决方案1】：

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

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

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

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

参考here

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>

【讨论】：

谢谢。貌似解决方案可以解决镀铬问题，但我尝试后无法解决性能问题
在性能方面可以做的不多。你试过设置一个 transformz(1px) 吗？
是的，但问题仍然存在
感谢您的评论！你拯救了我的一天！

【解决方案2】：

这个链接可以帮助解决这个问题。它给出了transform属性的详细解释。

Here's the link

【讨论】：

建议最好放在cmets中。回答一般是为了解决问题，解释场景，解决问题。
谢谢，我在问这个问题之前已经尝试过链接但没有解决问题