React App CSS 过渡非常慢答案

【问题标题】：React App CSS Transitions Are Very SlowReact App CSS 过渡非常慢
【发布时间】：2018-08-11 19:58:52
【问题描述】：

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

Repo Demo

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

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

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

很困惑，我可以测试什么来解决这个问题？

【问题讨论】：

不确定 “CSS 悬停过渡非常滞后和缓慢” 是什么意思，但是当我将鼠标悬停在框上时似乎很好
您是否尝试在过渡时也从 1 开始添加变换比例？

标签： javascript css reactjs create-react-app css-modules

【解决方案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，但无论如何最好记住这一点。

【讨论】：

哇，非常感谢，添加 will-change 修复了它！我一定会查看您链接到的性能文章。

【解决方案2】：

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

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

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

【讨论】：