Javascript React应用程序CSS转换非常慢

我有一个简单的博客，我正在使用CreateReact应用程序（使用react）开发-scripts@next获得CSS模块支持）

我遇到的问题是CSS悬停转换非常缓慢。我以前使用NodeEJS模板实现了这个接口，一切都很快

我认为问题可能与组件接收新道具和不断重新渲染有关，但所有道具在加载后看起来都是静态的

我检查了Chrome性能选项卡，它说大多数循环都是在绘制时间（而不是加载时间）使用的

---

非常困惑，我可以测试任何东西来解决问题吗？

为大型图像设置动画会导致性能问题。示例中的第一个图像是：宽度：5264px；高度：3393px；。优化网络图像，他们应该加载更快，动画顺利

考虑设置文本和纯HTML元素的动画，但尽量避免设置大型图像的动画

---

当您通过转换来调整图像大小时，它必须在转换过程中多次渲染图像，而且非常“昂贵”。

当您有知道将触发的动画时，最好使用

将更改

规则，以帮助浏览器更高效

添加以下规则大大提高了Chrome的性能：

将更改：变换、框阴影、z索引


另外，看看这篇文章。它提供了很棒的技巧来帮助提高网站的性能和动画效果


我看到的一件事是，在悬停时，您正在更改z索引。这可能会减慢速度，所以在使用任何定位规则时都要小心。
transform:translate
规则比top、left、right、bottom和z-index更有效。不确定你是否可以在设计中使用z-index，但最好记住这一点。
不确定你说的“CSS悬停过渡非常缓慢”是什么意思，但当我悬停在框上时它看起来很好。你是否尝试在过渡处从1开始添加变换比例？哇，非常感谢，添加将改变它！我一定会签出你链接到的性能文章。