Chrome-背景尺寸：封面；基于图片的库会导致性能问题

Question

我正在使用Vue 2构建应用程序。其中有一个页面包含一个简单的图库，其中包含大约20张图像和一个大页面背景图像。

页面本身的背景图像实际上包含在一个固定的div元素中，该元素为position: fixed;，具有100％width和height并使用{{1} }以显示图像。

图库中的所有〜20件商品也都使用background-size: cover;元素，其中div显示在3列网格中，并且图像是使用动态生成的background-size: cover; CSS显示的属性使用Vue计算属性。图像路径永远不会改变，因此它们不会被AFAIK不断地重新计算。

此页面在Chrome中的性能非常糟糕，加载需要花费很长时间（尽管这些是一些高分辨率图像，但宽度为4K），并且一旦加载图像，我就可以与页面进行交互，但是一切都非常缓慢，有时页面完全停止响应。

另一方面，在Firefox和Edge中，无论是在图像加载期间还是在滚动/渲染期间，所有内容基本上都是平滑的。与应用程序的交互从未被阻止。

我记得要解决此问题的方法是，将background-url元素替换为常规div标签，并使用这些标签加载图像。另外，我尝试过缓存图像，尝试使用静态图像URL进行测试-每次都会发生相同的事情-其他浏览器处理得很好，Chrome对此感到窒息。

这是大约30秒内性能摘要的屏幕截图，从我单击页面URL到基本上加载了所有内容，而浏览器仍在努力呈现任何内容并处理与页面的任何交互。显然，绘画阶段是这里的问题：

有什么建议吗？谢谢！

Answer 1

这个问题很难回答，因为它是一个非常具体的问题。

您可以使用开发人员工具分析是什么原因导致了chrome中的这种行为：

1. 按“ Ctrl + Shift + I”打开Chrome中的开发者工具。
2. 转到“性能”标签。
3. 点击录制按钮，然后执行性能低下的操作。
4. 停下来，您可以了解后台发生的事情。

如果您没有找到上述建议的问题，可以在此处发布性能下降的详细屏幕截图，我可能会为您提供帮助。