React App CSS 转换非常慢

Question

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

回购 演示

我遇到的问题是 CSS 悬停过渡非常滞后和缓慢。我之前使用 Node EJS 模板实现了这个界面，一切都很快。

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

我检查了 Chrome 性能选项卡，它说大部分周期都被绘制时间（而不是加载时间）使用了。

很困惑，有什么我可以测试来解决问题的吗？

Answer 1

当您知道会触发动画时，最好使用该will-change规则来帮助浏览器提高效率。

添加以下规则可显着提高 Chrome 中的性能：

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

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

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

我看到的一件事是，在悬停时您正在更改 z-index。这可能会减慢速度，所以在使用任何定位规则时要注意。这些transform: translate规则比 top、left、right、bottom、z-index 的性能要好得多。不确定您是否可以在设计中使用 z-index，但无论如何记住它是很好的。