React :: 上下滚动时部分变白

Question

各位大侠有什么快速的解决办法吗？

我正在快速上下滚动，您可以看到某些部分变白了。 请参考我下面的短片： https : //screencast-o-matic.com/watch/cYjuXRmdje

我正在使用 Chrome 浏览器并做了一些研究，这似乎是因为 Chrome 中的新问题。 硬件加速，可以在Chrome 设置 > 高级 > 系统 > “可用时使用硬件加速”中找到

关闭它是可行的，但在 Edge 或类似的东西中如何。

实时站点： https: //hitchcliff.github.io/onepage-studio/ Github 存储库： https : //github.com/hitchcliff/onepage-studio-code

Answer 1

我的第一个怀疑是运行一些 JS 会阻止浏览器更新，在使用 chrome 开发工具后我看不到任何明显的东西。

然后我查看了页面上的图像，它们很大，有些图像超过 10 mb！ 理想情况下（这取决于上下文）您的图像应该低于 100kb（最好更小！）。

我建议您通过以下工具运行所有图像： https : //squoosh.app/或https://tinypng.com/ - 我怀疑这会解决您的问题。 浏览器处理这么大的文件需要付出很多努力，因此您会看到白色区域。

从长远来看，考虑在构建过程中引入一个缩小工具来帮助自动化这样的事情。