所以我正在制作这个有大量图像的水平滚动网站。我计划在整个网站上使用 svg，但是页面中只使用了 20-30 个中到高复杂度的 svg 图片，而且 chrome 似乎已经显示出 som jank 和高绘制时间（而 Firefox 更糟糕，虽然野生动物园似乎做得更好）。
滚动时间轴
View the site（只能在mac上滚动，windows用户可以使用方向键）
我的问题是，如果我使用 pngs 而不是 svgs，它会减少绘制时间并因此减少卡顿吗？为什么浏览器只能处理大约 20 张 svg 图像？
【问题讨论】：
标签： html css svg google-chrome-devtools webpage-rendering
我曾经有过类似的事情。 SVG 的宽度是上图的 10 倍或更多，它包含约 20k 个元素，大小约为 3MB。唯一带来性能的东西（因为它是一个跳跃和跑步游戏）是一种能够找到边界框与视口重叠的所有元素的算法。有了这个，我可以使用display: none; 来隐藏所有不可见的东西。
这将可见元素的数量减少到每帧约 150 个，游戏再次流畅运行。
我使用平衡二叉树（avl 树）和一维范围查询，因为视口的高度始终与图像相同。
祝你好运！
[编辑]
忘记留下诸如anwer之类的东西。根据我的经验，大型/巨大的 SVG 图形是渲染的瓶颈，尤其是在发生大量脚本的情况下。如果您不需要与 Graphic 中的元素进行任何交互，因此只需要大的背景图像，我建议使用基于 PNG 图像的 Tile 地图，这是 Jump'n'Run 游戏中的标准方式»worlds«，因此您可以在两点上获得性能：
此外，您可以使用 PIXI.js 之类的东西来使用 WebGL 进行渲染，这将极大地提高性能，并支持 Tilemaps 和 Spritesheets。
如果您坚持 Vector Grafics（缩放、交互）的优势，那么您需要找到一种方法来隐藏尽可能多的元素以保持较高的帧速率。
【讨论】：
requestAnimationFrame 触发。我将每个元素的 x-min 和 x-max 坐标存储在 AVL-Tree 中（初始化需要一些时间）并在那棵树上运行范围查询，这又非常快。
display:none;
正如我所怀疑的那样，问题原来是完全不同的。浏览器不仅能够处理多个矢量图像。但他们不擅长（并且可以理解）经常重绘这些图像。
问题
我的长水平滚动站点非常宽（30,000 像素）。我有一个background-color 属性应用于较低的z-index'ed div 之一，以代表整个滚动站点的天空。我不希望天空拉伸整个 30,000 像素，因为它基本上没有太大变化，因此给了它视口宽度和高度：
position:fixed;
这不是一个非常聪明的举动。事实证明，这个属性导致我的文档层在每一帧上都被重新绘制。最初我认为浏览器在滚动时这样做是正常的，因为我用作参考的Robby Leonardi's 站点也重新绘制了每一帧。
解决方案
感谢一位chrome开发工具开发者this article，我抛开传统智慧，制作了天空层
position:absolute;
并将其拉伸到整个站点的宽度，然后轰隆隆！油漆矩形消失了。而且滚动性能比黄油还流畅。
我尝试过的其他解决方案
按照@philipp 的建议，隐藏不在视口附近的元素以使绘画更轻，但没有产生任何明显的差异。此外，它感觉超级hacky，而且它没有针对问题的根本原因。
我尝试将我的网站模块化为场景，并在每个场景上使用translateZ(0) hack，以便只重绘较小的场景而不是文档。这实际上有很大帮助，并且滚动很不错。然后，
我使用translateZ(0) 为所有 svg 图像赋予了它们自己的图层。我现在开始获得大约 60 的 FPS，但同样，这不是正确的做事方式。
【讨论】：