transform 会引起重绘和重排吗？

[chdyiboke]

浏览器有相当繁重的工作要处理，也意味着 Transition 可能会出现卡顿。那 transform 对网页性能的影响大吗？会引起重绘和重排吗？

[chdyiboke]

假设我们想要把一个元素从一半大小缩放到实际大小，并假设我们使用CSS的transform 属性来对它进行缩放，同时使用CSS的transition属性来生成缩放的动画效果，如下所示：

`div {
transform: scale(0.5);
transition: transform 1s linear;
}

div:hover {
transform: scale(1.0);
} `

[chdyiboke]

CSS的transform属性不会改变元素的布局，也不会影响到其周围的元素。它把元素当做一个整体看待——缩放整个元素、旋转整个元素或者移动整个元素。

浏览器只需在动画开始的时候生成这个元素的位图对象，并把它传递给GPU。在这之后，浏览器无需再做任何重新布局，绘制页面以及传递位图对象的操作了，相反，浏览器可以利用GPU擅长的绘制的特点来快速的在不同的位置，旋转或缩放同一个位图对象。

[chdyiboke]

在动画上特别快的CSS属性包括：

CSS transform CSS opacity CSS filter

参考： https://www.jianshu.com/p/4c9d91277172