在 React 中为具有复杂 box-shadow 和 text-shadow 的元素设置动画时，Android Chrome 性能不佳答案

【问题标题】：Bad performance on Android Chrome when animating movement on elements with complex box-shadow and text-shadow in React在 React 中为具有复杂 box-shadow 和 text-shadow 的元素设置动画时，Android Chrome 性能不佳
【发布时间】：2021-09-07 03:07:32
【问题描述】：

摆弄一个小型反应应用程序时，我在 android 移动设备上以 chrome 浏览它时遇到了糟糕的性能。我将其范围缩小到与具有来自 box-shadow 和 test-shadow 属性的发光效果的元素上的运动动画相关。

我做了一个例子，通过打开边框和数字发光效果可以观察到性能问题。

https://lueivind.github.io/chrome-android-animation/

我已经在 Windows Desktop Chrome 和 Edge、Android Mobile Edge 和 Firefox、Iphone Safari 和 Chrome 上进行了测试。仅通过观察，除了 Android 上的 Chrome 之外，其他所有设备的性能似乎都不错。

代码在这里可用； https://github.com/lueivind/chrome-android-animation

奇怪吗？

【问题讨论】：

感谢您提供了演示和源代码，因为您使用的是 react 项目，但下次使用 codesandbox 并分享链接，这样我们可以更轻松地测试/修改演示代码。

标签： android css reactjs google-chrome animation

【解决方案1】：

问题在于 CSS 关键帧在布局属性 left 上进行动画处理。

@keyframes translation {
    0%{
      left: 0;
    }
    100%{
      left: calc(100% - 11em);
    }
  }

如果您希望获得流畅的高性能动画，请避免布局属性，因为浏览器必须每 60 fps 重新计算文档中的元素位置以及移动其他元素的位置。相反，目标是为composite properties 设置动画，它们是opacity 和transform。

@keyframes translation {
    0%{
      transform: translateX(0);
    }
    100%{
      transform: translateX(calc(100vw - 11em));
    }
  }

这个article goes much more in depth 在您制作动画时在浏览器中会发生什么。以下是制作动画时要使用/避免使用的CSS properties 列表。

【讨论】：