基于Chrome - background-size: cover；的图库导致性能问题

Question

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

页面本身的背景图像实际上包含在一个固定的div元素中，该元素为position: fixed;，具有100%的width和height，并使用background-size: cover;来显示图像。

图库中的大约20个项目也都在使用div元素，这些元素的background-size: cover;显示在一个3列网格中，图像是使用Vue computed属性动态生成的background-url CSS属性显示的。图像路径永远不会改变，所以它们不会不断地被AFAIK重新计算。

这个页面在Chrome中的表现糟糕透顶，加载耗时很长(虽然是一些高分辨率的图像，但宽度为4K )，一旦图像加载完成，我就可以与页面进行一些交互，但一切都非常缓慢，有时页面完全停止响应。

另一方面，在Firefox和Edge中，无论是在图像加载期间还是在滚动/渲染期间，基本上一切都非常流畅。与应用程序的交互永远不会被阻止。

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

这是大约30秒内的性能摘要屏幕截图，从我单击页面URL的那一刻开始，一直到基本上所有内容都已加载，而浏览器仍在努力渲染任何内容并处理与该页面的任何交互。显然，绘制阶段在这里是一个问题：

​

​

有什么建议吗？谢谢!

Answer 1

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

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

通过按"Ctrl+Shift+I".

• Go到tab "Performance".

• Hit record按钮来打开chrome中的开发人员工具，然后执行具有低performance.

• Hit stop的操作，您会得到后台发生的详细信息。

如果你在上面的建议中没有发现问题，你可以在这里发布性能分解的详细屏幕截图，我也许可以帮助你。