【发布时间】：2019-05-08 00:03:28
【问题描述】：
我正在使用 Vue 2 构建一个应用程序。有一个页面包含一个简单的图片库，其中包含大约 20 张图片和一个大页面背景图片。
页面本身的背景图片实际上包含在一个固定的div元素中，即position: fixed;，有100%的width和height，并使用background-size: cover;来显示图片。
图库中的所有 ~20 个项目也都使用 div 元素，background-size: cover; 显示在 3 列网格中，并且图像使用使用 Vue 计算属性动态生成的 background-url CSS 属性显示.图像路径永远不会改变，因此它们不会被不断地重新计算 AFAIK。
此页面在 Chrome 中的性能非常糟糕，加载需要很长时间（不过，这些是一些高分辨率图像，宽度为 4K），一旦图像加载，我可以与页面进行一些交互，但一切都非常滞后，有时页面完全停止响应。
另一方面，在 Firefox 和 Edge 中，无论是在图像加载过程中还是在滚动/渲染过程中，一切基本上都非常流畅。与应用的交互永远不会被阻止。
我记得尝试解决此问题的方法是将div 元素替换为常规的img 标签并使用这些标签加载图像。此外，我尝试缓存图像，我尝试使用静态图像 URL 进行测试 - 每次都会发生同样的事情 - 其他浏览器处理得很好，Chrome 对此感到窒息。
这是大约 30 秒内性能摘要的屏幕截图，从我单击页面 URL 的那一刻到基本上所有内容都已加载并且浏览器仍在努力渲染任何内容并处理与页面的任何交互的那一刻。显然，绘画阶段是一个问题：
有什么建议吗？谢谢！
【问题讨论】：
-
好的，看来您确实有一些有趣的问题。您能否显示带有详细细分的屏幕截图，如下图所示：kisspng.com/… 增加开发人员工具窗口的大小以获得更大的细分视图。单击细分并使用键盘键 A S W D 在图表中进行缩放和移动。
-
当然我会收集数据并将其发布在原始问题中。
标签： javascript performance google-chrome vuejs2 background-size