同时运行CSS3 Animation与requestAnimationFrame触发Recalculate Style是否为BUG

结论 #

这个现象不代表GPU加速未生效，也不属于浏览器BUG，属于浏览器正常的渲染调度逻辑。

原因说明 #

• 单独运行CSS3 transform动画时，浏览器会自动将动画元素提升到独立的合成层，动画逻辑直接交给GPU线程处理，不需要经过主线程的样式计算、布局、绘制阶段，所以观测不到Recalculate Style触发。
• 当注册了requestAnimationFrame回调后，浏览器的渲染流水线会强制走完整的主线程生命周期：先执行所有requestAnimationFrame回调，之后必须执行一次全量样式校验（也就是你观测到的Recalculate Style）。这是因为浏览器无法预判回调内是否修改了DOM或样式，必须做一次校验确保渲染结果正确，哪怕你的回调内没有任何DOM修改操作。
• 这个触发的Recalculate Style是极低开销的空校验，不会打断原本CSS动画的GPU加速路径：动画元素依然在独立合成层由GPU渲染，没有触发额外的布局、重绘操作，动画性能不受影响。

验证方法 #

你可以通过浏览器开发者工具的Layers面板确认：同时运行动画和requestAnimationFrame时，动画元素的独立合成层依然存在，合成层没有被销毁回退到普通渲染层。

优化建议 #

这个空的Recalculate Style开销几乎可以忽略，正常业务场景不需要做特殊处理。如果极端场景下要完全消除，可将纯展示类的CSS动画放到独立iframe内运行，但实际收益极低，不推荐做此类优化。

内容的提问来源于stack exchange，提问作者HelKyle