html5 – 优化基于SVG的精灵表在CSS3硬件GPU加速在(手机)浏览器

在过去的一周，我一直在帮助一个朋友在浏览器中使用基于SVG的sprite工具。我们想要提供一个理想的工作流程，以准备，发布和在浏览器中运行高品质的动画图形。因此，理想情况下有一个单一的动画数据来源，适用于小智能手机屏幕，平板电脑，视网膜显示器和桌面浏览器。

理论上，(基于矢量)SVG应该是理想的，但由于SVG通常不会使用那么多 – 我们决定测试它。这个想法不是使用SMIL SVG(所以没有基于SVG的动画)，而是创建一个动画sprite-sheet(通常会与光栅数据PNG / JPG)，但这样做与纯矢量，即SVG。它有点大，但如果它的工作原理 – 它会工作，甚至更好的东西。

加上逐帧矢量动画可以为我们的工作流做很大的事 – 它将允许我们使用Flash编辑器来做动画，然后将它们导出到SVG精灵表。

无论如何，结果工作出奇的好，但也失败在某些领域(请注意，为测试目的，我们只使用基于Webkit的浏览器，Safari，Chrome，iOS上的移动Safari和Android ICS)。

在CSS中，很容易触发这样的sprite表的硬件加速(至少在带有关键帧和步骤的现代浏览器中) – 你只需这样做：

background-image: url(my.svg);
-webkit-animation: walk 1s steps(12,end) infinite;

调用基于关键帧的动画如下所示：

@-webkit-keyframes walk {
    from { -webkit-transform: translate3d(0,0); }
    to { -webkit-transform: translate3d(-100%,0); }          
}

其中使用translate3d应该让GPU踢，整个事情应该是硬件加速在iOS手机Safari和Android ICS浏览器。

令人惊讶的是，考虑到它是一种强力的技术和一个相当大的矢量动画(600x600px的测试) – 整个事情飞。但它不完美 – 它在Safari前闪烁，起飞。在ICS浏览器它的闪烁所有的时间，所以它不真正可用。

所以我们尝试了通常的技巧来摆脱闪烁，如：

-webkit-transform: translateZ(0);    
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

但是没有工作。因此，我们尝试在内存中动态地将SVG光栅化，并将其作为纹理使用-webkit-transform：scale3d(1,1,0)，但这没有帮助ether。

最后，我们只是用一个渲染出的PNG / JPG精灵表替换了SVG，因为复杂的向量对于浏览器来说太多了 – 但猜测是什么？它的同样的问题 – 所以它的不是SVG渲染 – 它的浏览器绘图问题。进一步的证明是，如果我们将动画降低到1FPS – 闪烁仍然存在。

图像对于GPU来说太大了吗？我们是否达到了您能够在浏览器(特别是移动设备)中舒适地绘制/动画化的性能限制？

我真的很感激的想法/黑客如何可能摆脱闪烁(特别是因为它执行sooo快)。它只是一个有前途的技术 – 高性能浏览器动画适应不同的屏幕尺寸 – HTML5 Holy Grail;

有几个优化如

<svg preserveAspectRatio="xMinYMax slice" viewBox="0 0 600 50">

和一些CSS魔术，我们能够使SVG适应其容器完美，并改变其大小从一个单一的CSS类。它真的会工作奇迹 – 但可惜的闪烁。

反正 – 请read more about it here，你也可以尝试一下。