将巨大的图像 (5mb) 加载到 svg 背景中会导致像素化和性能问题

Posted 2023-02-21

【中文标题】将巨大的图像 (5mb) 加载到 svg 背景中会导致像素化和性能问题

【英文标题】：Loading a huge image (5mb) into svg background leads to pixelation and performance issues

【发布时间】：2015-07-12 04:50:38

【问题描述】：

我在 pixelation 和 SVG 背景图像的 性能 以及 D3.js 方面存在一些问题。

您已经可以在此处看到一个正在运行的示例：http://arda-maps.org/ages/first/ 请不要分享，直到它仍然是 Alpha。谢谢。

示例

让我们以树为例。这也是它们稍后在浏览器中的外观：

如您所见，它们的质量可能不是最好的，但您几乎看不到任何像素。所以我使用这张图片（~5mb），正如你在上面的链接中看到的那样，当你点击实验室图标（在底部）并等待几秒钟......你也可以在那里看到它们。

好的，但是如果你放大你可以看到像素。并且感觉（与矢量视图相比）非常滞后，性能下降巨大。这是网站上该区域的视图：

我还提到 Chrome 在他还没有完成背景提升或其他任何事情之前几乎崩溃了。但是在 Firefox 中它运行得很好。所以如果可能的话，请在 Firefox 中测试它。

另一个子问题是，至少在 Firefox 的缩放步骤 7 到 19 中，您看不到图像背景。但在矢量视图中一切都很好。由于我没有改变任何东西，这是另一个问题。但我找不到原因=/

替代方案

我知道我可以使用平铺图像图形。但至少在 D3.js 中，这些很难甚至不可能与矢量视图结合使用。我知道谷歌地图和其他人正在成功地做到这一点。但他们不像我那样使用来自 topojson 的数据。

最后我想要一张可以在矢量和图像视图中查看的地图。我也愿意接受任何有创意/古怪的想法 =)

非常感谢。

【参考方案1】：

我不太了解您的问题，但如果您在 SVG 中有较深的层次结构树，则性能明智，您应该考虑改用 html5 画布，因为它的性能效率更高。从你的问题来看，这是主要问题。也许这不是最适合您的解决方案，但我认为您应该阅读最适合您的解决方案。 有关 SVG 和画布之间的优缺点，请参阅 https://msdn.microsoft.com/en-us/hh552482.aspx?f=255&MSPPError=-2147217396 和 http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas/。 Microsoft Virtual Academy 也为此专门开设了一章。

希望对你有帮助！

【讨论】：

如您所见，SVG 工作正常。这只是我对 =) 有疑问的 PNG 背景图像，所以如果我使用 canvas、svg、html5 或我相信的任何东西都没有关系 =) 你能解释一下你特别不明白的地方吗？我的意思是它不会落后于你吗？什么时候放大一切都是高质量的？

嗨，我现在正在使用 Microsoft Edge（Project Spartan），实际上我没有任何问题 :) 不幸的是，我没有安装任何其他浏览器。我现在更好地理解了您的问题，谢谢！也许我有点固执，但请阅读我提供的第一个链接中的“画布图表/图形场景”一章。我真的认为你应该比较 SVG 和 Canvas，如果只是渲染背景图像（放大/缩小）。如果有很多动作、元素和重新渲染，并且您的地图不是那么静态，Canvas 更适合 :)

您的文章还告诉我们，对于地图，最好采用 SVG。如果我错了纠正我。但无论如何，Canvas 肯定更适合图像。我从文章中读到。但是让我们看看混合这两种技术是否效果很好。你对此有什么建议吗？也许你很快就会有其他东西然后斯巴达？顺便说一句，Spartan 是否正确显示标签？我问是因为在上一个 IE 版本中存在一个巨大的错误，自 4 个月以来一直没有修复... thx

是的，我知道，不幸的是，这不是一个明确的“使用这个或那个”。我下载了 Firefox，现在比较时看到的 Microsoft Edge 的标签不见了：/

所以这个问题也存在于“新”边缘。哈哈微软；）这里是那个问题的链接：***.com/questions/28210527/…

【参考方案2】：

因为 5mb 对于浏览器来说太大了。我现在用 50% 的宽度和高度对其进行了测试。所以图片现在只有 2,33mb 大。

如您所见，它现在可以在 Firefox 和 Chrome 中运行，并且图片在大约 2 秒内加载完毕。性能还可以。

但可以肯定的是，我不能再将地图放大那么多，否则它会变得非常像素化。所以我把它限制在放大 7 倍。

所以唯一的其他解决方案是平铺图像，但这对于这个项目来说很难做到。正如我所说，这将杀死软缩放。