修复了SVG css-background减慢Webkit和FF的速度

Question

我一直在尝试非常复杂的SVG背景（通过CSS，修复，100％大小），它使基于FF和Webkit的浏览器慢慢爬行，到了无法滚动的程度。

您是否知道如何提高速度？

我研究了一个很大的PNG（加载缓慢，而不像SVG那样“平滑”）和Canvas没有太大成功。

有问题的网站是here。现在它采用了canvas方法。

网站上的所有元素都是基于矢量的，因此可以扩展到任何设备。

Answer 1

因此，当复杂的svg背景应用于底层画布（或img）时，所有流行的浏览器似乎都会更快地渲染页面/滚动，然后将其应用于body元素本身。

仍在寻找如何让它更快地运作的建议，但至少现在它可以使用。

Answer 2

这种背景在动态渲染时非常复杂，所以我认为SVG不可行。您将不得不考虑以下解决方案之一：

• 使用预渲染的背景（即png背景）。
• 使用更简单的SVG，元素更少。在当前背景下，浏览器必须单独渲染每一行。