React App CSS过渡非常慢

Question

我有一个简单的博客，正在使用create-react-app（使用react-scripts @ next来获得CSS模块支持）进行开发。

Repo Demo

我遇到的问题是CSS悬停过渡非常缓慢且缓慢。我以前使用Node EJS模板实现了此接口，并且一切都快速且快捷。

我认为问题可能与PostSummary组件接收新的道具并不断重新渲染有关，但是一旦加载它们，所有的道具似乎都是静态的。

我检查了Chrome的“性能”标签，它说大部分周期是在涂漆时间（而不是加载时间）上使用的。

很困惑，我能测试一下解决该问题的任何方法吗？

Answer 1

当您拥有可以触发的动画时，最好使用will-change规则来帮助浏览器提高效率。

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

will-change: transform, box-shadow, z-index;

另外，请查看这篇文章。它提供了AWESOME技巧，可帮助改善您网站上的性能和动画。

https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108

我看到的一件事是，悬停时您正在更改z-index。这可能会减慢速度，因此在使用任何定位规则时请务必小心。 transform: translate规则比上，左，右，下，z-index性能更高。不确定是否可以在设计中使用z-index，但是无论如何要牢记这一点是很好的。

Answer 2

对大图像进行动画处理将导致性能问题。您的示例中的第一张图片是：width：5264px;高度：3393px;。优化网络图像，它们应该更快地加载并动画流畅。

考虑为文本和纯HTML元素设置动画，但请避免为大型图像设置动画。

在通过过渡调整图像大小时，必须在过渡期间多次渲染图像，而且非常“昂贵”。