Performance Firefox/Opera慢速页面绘制

我刚刚为我的创业公司完成了这个启动页面的设计：

在我测试过的所有浏览器中，加载时间和初始渲染都是一个快照。（我没有看过任何IE版本，但我把它发给了朋友，他们都觉得它与Chrome非常相似，但他们没有注意到任何东西。他们不是网络开发者，所以如果你发现了什么，请告诉我）

该网页使用jQuery进行简单的幻灯片放映，而视差滚动则使用skrollr

它使用SVG精灵，其宽度和高度已设置为其任何图标的最大渲染大小的3倍（因为Opera和Firefox渲染问题，SVG无法以最终大小重新绘制）

在Chrome/Safari上，该站点平滑、快速，没有问题。在Firefox和Opera（尤其是Firefox）上，无论是调整大小还是滚动事件，页面都需要很长时间才能重新绘制，而且动画都非常不稳定

我怀疑它可能是SVG精灵，但我真的不确定。当我把它放大时，我所遇到的问题可能会稍微加剧，但我之前就已经解决了

---

有什么想法吗？

对我来说，很明显，SVG才是问题所在。我已经一个接一个地禁用了它们，现在页面速度很快（以前落后了很多）

即使单个SVG进入视口，页面也会立即开始滞后

它使用SVG精灵，其宽度和高度已设置为其任何图标最大渲染大小的3倍

---

你能详细说明一下吗？此SVG为2250×10350像素。光栅化需要大量的RAM。SVG如此之大的原因是Firefox和Opera都存在渲染问题，它们将SVG光栅化为初始大小，并且在缩放后不会重新光栅化。只有几个图标确实需要如此大，因此我正在考虑重新制作sprite的布局，如果我计算正确的话，结果应该是1500px 300px。对于不需要动态重新缩放的图像，您应该只使用具有所需大小的PNG精灵。对于各种移动版本+徽标大小调整，这些图像正在重新缩放，这就是我没有使用PNG精灵的原因。我想尝试一次单个精灵，而不是基于分辨率检测的精灵。我对这个游戏并不陌生，只是尝试了一些SVG精灵的新功能，以及调试SVG支持的新功能（这是一次令人头痛的体验）。：）你和skrollr做的很棒，谢谢！