React App CSS 转换非常慢
React App CSS Transitions Are Very Slow
我有一个使用 create-react-app 开发的简单博客（使用 react-scripts@next 获得 CSS 模块支持）。
我遇到的问题是 CSS 悬停过渡非常缓慢。我之前使用 Node EJS 模板实现了这个界面，一切都很活泼和快速。
我认为问题可能与 PostSummary 组件接收新道具并不断重新渲染有关，但所有道具在加载后似乎都是静态的。
我检查了 Chrome 性能选项卡，它说大部分循环被绘制时间（而不是加载时间）使用。
很困惑，我可以测试什么来解决这个问题？
动画大图像会导致性能问题。您示例中的第一张图片是：宽度：5264px；高度：3393px；。优化网络图像，它们应该加载更快，动画更流畅。
考虑对文本和纯 HTML 元素进行动画处理，但尽量避免对大图像进行动画处理。
当您通过过渡调整图像大小时，它必须在过渡期间多次渲染图像并且非常 "expensive"。
当您知道会触发动画时，最好使用 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，但无论如何记住它是件好事。
我有一个使用 create-react-app 开发的简单博客（使用 react-scripts@next 获得 CSS 模块支持）。
我遇到的问题是 CSS 悬停过渡非常缓慢。我之前使用 Node EJS 模板实现了这个界面，一切都很活泼和快速。
我认为问题可能与 PostSummary 组件接收新道具并不断重新渲染有关，但所有道具在加载后似乎都是静态的。
我检查了 Chrome 性能选项卡，它说大部分循环被绘制时间（而不是加载时间）使用。
很困惑，我可以测试什么来解决这个问题？
动画大图像会导致性能问题。您示例中的第一张图片是：宽度：5264px；高度：3393px；。优化网络图像，它们应该加载更快，动画更流畅。
考虑对文本和纯 HTML 元素进行动画处理，但尽量避免对大图像进行动画处理。
当您通过过渡调整图像大小时，它必须在过渡期间多次渲染图像并且非常 "expensive"。
当您知道会触发动画时，最好使用 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，但无论如何记住它是件好事。