Firefox / Opera 慢页面绘制答案

【问题标题】：Firefox / Opera Slow Page paintFirefox / Opera 慢页面绘制
【发布时间】：2013-07-29 20:34:54
【问题描述】：

我刚刚为我的初创公司设计了这个启动页面：http://beta.mergenote.com/

加载时间和初始渲染在我测试过的所有浏览器中都很简单。（我没有看过任何 IE 版本，但将它提供给了朋友，他们都觉得它与 Chrome 足够相似，他们没有注意到任何东西.. 他们不是网络开发人员，所以如果你发现了什么，请告诉我）。

网页使用 jQuery 制作简单的幻灯片，视差滚动使用 skrollr https://github.com/Prinzhorn/skrollr

它使用 SVG 精灵，其宽度和高度已设置为任何图标的最大渲染尺寸的 3 倍（由于 Opera 和 Firefox 渲染问题，SVG 不会以最终尺寸重绘）。

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

我怀疑它可能是 SVG 精灵，但我真的不确定。我遇到的问题可能在我增大尺寸时会稍微加剧，但之前就已经存在了。

有什么想法吗？

【问题讨论】：

【解决方案1】：

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

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

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

你能详细说明一下吗？此 SVG 为 2250 x 10350 像素。光栅化需要大量 RAM。也可以是 225x1035。

【讨论】：

SVG 如此大的原因是 Firefox 和 Opera 中的渲染问题，它们会在 SVG 的初始大小上进行光栅化，并且在缩放后不会重新光栅化。
只有几个图标真的需要那么大，所以我正在考虑重做精灵的布局，如果我完成了我的，最终应该是 1500px x 300px数学正确。
对于不需要动态重新缩放的图像，您应该只使用具有您需要的确切尺寸的 PNG sprite。
对于各种移动版本+徽标调整大小，这些图像正在重新缩放，这就是我没有使用 PNG 精灵的原因。我想尝试一次单个精灵，而不是基于 res 检测的精灵。我对这个游戏并不陌生，只是尝试使用 SVG 精灵和调试 SVG 支持的新东西（这一直是令人头疼的体验）。 :) 你用 skrollr 做的很棒，谢谢！