Chrome开启硬件加速后带text-shadow属性的CSS动画仍卡顿如何解决

• Chrome对动态变化的text-shadow和多重filter组合的硬件加速优化策略和Firefox不同：Firefox可以直接将多层text-shadow的动画完全交给GPU合成，而Chrome在text-shadow的模糊半径、颜色、偏移逐帧变化时，会强制回退到CPU进行文字栅格化，每帧都要重新计算7层阴影的渲染效果，额外占用大量CPU资源，叠加其他动画开销就会出现卡顿。
• 你当前同时动画了大量会触发重排（Reflow）的属性：父元素动画中修改的height、margin-left、font-size都会触发整个页面每帧重新计算布局，叠加子元素的阴影、滤镜动画，性能开销直接翻倍。
• 硬件加速触发存在语法错误：你写的perspective: 1000缺少单位，Chrome无法正确识别该属性，导致你期望的硬件加速没有实际生效。
• filter属性存在语法错误：@keyframes r15中的filter: brightness(401%); hue-rotate(88deg);用分号分隔了多个滤镜函数，正确写法应该用空格分隔，语法错误会导致浏览器走兜底的软件渲染路径，进一步降低性能。

1. 替换所有触发重排的动画属性：把父元素修改margin-left、height、font-size的逻辑全部换成transform实现，比如用transform: translateX(310px) scaleY(0.33)实现位移和高度变化，用子元素的transform: scale()实现字号变化，完全避免重排开销。
2. 优化阴影和滤镜的实现：将多层text-shadow替换为filter: drop-shadow()实现，GPU对drop-shadow的加速支持更好，同时可以大幅降低多层阴影的计算开销；修复filter属性的语法错误，多个滤镜函数用空格分隔不要用分号。
3. 正确触发硬件加速：补全perspective的单位为px，给执行动画的元素添加will-change: filter, transform属性，提前告知浏览器需要对这些属性做动画优化，提前分配GPU资源。
4. 简化动画属性：如果不需要同时动画所有滤镜，可以拆分动画逻辑，仅保留必要的逐帧变化属性，进一步降低渲染开销。
5. 额外优化：给文字元素添加-webkit-font-smoothing: antialiased属性，优化Chrome下的文字渲染效率，减少动画时的栅格化开销。

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