浏览器原理 · 单选题 · 第 27 题
前端与全栈开发面试 · 第 27 题
做位移动画时,为什么推荐改 transform 而不是改 top / left?
- Atop 和 left 的动画会被浏览器自动转换为 GPU 动画,性能其实更好一些
- Btransform 只能在 Chrome 浏览器中使用,但在 Chrome 里面运行的效率最高
- C只改 transform 或 opacity 的动画可以交给合成线程处理,跳过布局和绘制
- D改 top 和 left 不会触发重排,改 transform 反而每一帧都会触发一次重排
答案
C C. 只改 transform 或 opacity 的动画可以交给合成线程处理,跳过布局和绘制
解析
改 top、left 每一帧都要重新布局和绘制,主线程一繁忙就会掉帧。transform 和 opacity 作用在合成层上,合成线程可以独立完成动画,即使主线程在执行 JS 也不受影响。will-change: transform 可以提示浏览器提前提升图层,但图层太多会占用大量显存,不要滥用。