svg图像是否比位图更难为浏览器呈现？

Question

所以我正在制作这个有大量图像的水平滚动网站。我计划在整个网站上使用svgs，但页面中只使用了20-30个svg中高复杂度的图像，并且chrome似乎已经显示som jank和滚动的高绘制时间（而firefox更糟糕，虽然safari似乎做得好多了）。

滚动时间表

View the site（滚动仅适用于mac，Windows用户可以使用箭头键）

我的问题是，如果我使用png而不是svgs，它会减少绘画时间，因此减少了jank吗？为什么浏览器只有大约20个奇怪的svg图像？

Answer 1

正如我所怀疑的那样，问题结果却完全不同了。浏览器不仅能够处理多个矢量图像。但他们不擅长（并且可以理解的是）经常重绘这些图像。

问题

我的长水平滚动网站非常宽（30,000像素）。我有一个background-color属性应用于较低的z-index＆＃39; ed div之一，以表示整个滚动网站的天空。我不希望天空伸展整个30,000像素，因为它基本上没有太大的变化，因此给它了视口的宽度和高度，用：

position:fixed;

不是一个非常聪明的举动。事实证明，这个属性导致我的文档图层在每一帧上重新绘制。最初我虽然浏览器在滚动上这样做是正常的，因为Robby Leonardi's网站，我用作参考也重新绘制了每一帧。

<强>解决方案

感谢其中一位chrome dev工具开发人员提出的this article，我抛开了传统智慧，并制作了天空图层

position:absolute;

并将整个网站的宽度拉伸，然后繁荣！油漆矩形消失了。滚动性能比黄油更平滑。

我尝试的其他解决方案

• 隐藏在视口附近的元素，使绘画更轻，如@philipp所建议，但没有任何明显的差异。此外，它感觉超级黑客，并没有针对问题的根本原因。

• 我尝试将我的网站模块化为场景并在每个场景上使用translateZ(0) hack，以便只重绘较小的场景而不是文档。这实际上帮了很多，滚动很不错。然后， 我使用translateZ(0)为所有svg图像提供了自己的图层。我现在开始获得大约60的FPS，但同样，这不是正确的做事方式。

Answer 2

我曾经有类似的事情。 SVG的宽度是上面显示的宽度的10倍或更多，它包含~20k元素，大小约为3MB。唯一能带回性能的东西（因为它是一个跳跃和运行游戏）是一种能够找到边界框与视口重叠的所有元素的算法。有了这个，我可以使用display: none;来隐藏所有看不见的东西。

将可见元素的数量减少到每帧约150个，并且游戏再次流畅地运行。

我使用了平衡二叉树（avl树）和一维范围查询，因为视口的高度始终与图像相同。

祝你好运！

[编辑]

忘了留下像anwer这样的东西。从我的经验来看，大型/巨大的SVG Graphics是渲染的瓶颈，特别是如果有很多脚本发生的话。如果你不需要与Graphic中的元素进行任何交互，那么除了大背景图像之外，我建议使用基于PNG图像的Tile地图，这是Jump'n'Run游戏中的标准方式»世界«，所以你可以获得两点的性能：

1. 渲染速度更快，
2. 你可以»lazy ajax load«tiles，视可见性而定，以防止用户在启动时下载“全世界”。

另外，您可以使用像PIXI.js这样的东西来使用WebGL进行渲染，这将大大提高性能，并支持Tilemaps和Spritesheets。

如果你坚持使用Vector Grafics（Scaling，Interactivity）的优势，那么你需要找到一种方法来隐藏尽可能多的元素，以保持帧率高。