看了一下你给同学的答疑，有几个疑问

来源：3-5 避免重绘【必学，加速页面呈现】

ShaneQin

2022-06-26

transform借用GPU对动画进行处理，而translate3d, translateZ不仅能借用GPU对动画进行处理，还能触发GPU硬件加速，这么理解对么？也就是说GPU处理和GPU加速是两回事？
transform不会触发回流和重绘和是否单独建立了一个图层没有关系，建立图层只是为了性能更好？
will-change是不是只能对transform和opacity使用？对width使用了也没有效果？也不会加速？

写回答

1回答

Mr_Max

2022-06-30

同学你好！

translate3d, translateZ都是transform变换。transform是可以利用GPU加速的。这里讲的GPU对动画的处理指的就是硬件加速，是一码事。
transform可以借用GPU对动画进行处理，省去布局和重绘。但浏览器不一定会建立单独图层，属于底层的实现。
will-change是让浏览器有一个预判，不仅用于transform和opacity。但用于它们时可以让浏览器根据需要提前准备建层优化。根据标准如果用于width浏览器也要提前进行优化准备的。不过它是有开销的，不能大量应用，多数情况还是进行一些动画的优化处理。https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

前端性能优化企业级解决方案 6大角度+大厂视野

只要项目还在线，性能优化永远是时刻要关注的问题

1109 学习 · 226 问题

相似问题

回答 3

回答 1

回答 1

回答 1

回答 2