2. 重绘重排； 更改opacity5到0.5会引发重绘重排吗 ？

一般不会重排，但是会重绘； 使用translateZ0提升到合成层，触发合成层优化，就不会触发重绘；

更改width会引发重绘重排吗？

会触发重排，然后导致重绘；

更改keyframes会引发重绘重排吗？

如果是更改几何属性，比如width这种，每一帧都会触发； 如果是transform或者opacity这类，都会优化到合成层；

更改transform会引发重绘重排吗？

合成层，不触发

更改translateY会引发重绘重排吗？

合成层，不触发

• 重绘：元素的样式改变，但是不影响布局；
• 重排：元素的布局改变，会引起重绘；

合成层优化

浏览器渲染引擎通过分层机制提升性能的核心策略;

• 浏览器将页面分为多个合成层
• 每个层可以独立进行光栅化

优势：

• 减少了重绘范围，只重绘该层内容
• GPU加速，避开主线程

触发属性： 给高频变化的属性添加will-change，以启动合成层优化；

/* 推荐写法 */
.animate-element {
  will-change: transform;
  transform: translateZ(0);
}