chdyiboke / weekly

issue and share weekly
5 stars 1 forks source link

transform 会引起重绘和重排吗? #35

Open chdyiboke opened 4 years ago

chdyiboke commented 4 years ago

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

chdyiboke commented 4 years ago

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

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

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

chdyiboke commented 4 years ago

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

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

chdyiboke commented 4 years ago

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

CSS transform CSS opacity CSS filter

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