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

我对 像素化 和 SVG 背景图像与 D3.js 的性能有一些问题。

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

例子

所以让我们以树为例。这也是它们稍后在浏览器中的样子: Tree image

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

好吧，但是如果你放大你可以看到像素。并且感觉(与矢量 View 相比)非常滞后并且性能大幅下降。这是网站上该区域的 View : enter image description here

我还提到 Chrome 在他还没有完成背景 risizing 或其他什么之前几乎崩溃了。但在 Firefox 中它运行得很好。因此，请尽可能在 Firefox 中进行测试。

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

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

最后我想要一张可以在矢量和 ImageView 中查看的 map 。我也乐于接受任何有创意/古怪的想法 =)

非常感谢。

最佳答案

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

希望对您有所帮助!

关于javascript - 将巨大的图像 (5mb) 加载到 svg 背景中会导致像素化和性能问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30002398/