0

我开发了一个小应用程序来测试 CSS3 和 translate3d。这个想法是渲染几个在屏幕上随机移动的 DIV。这是一种粒子系统，我知道我可以使用 WebGL 或 Canvas 来获得更好的性能，但我也希望它在移动浏览器上顺利运行，因此我认为 DOM 操作会更好地提高性能。

几个小时后，您将在此网址找到结果

我想达到最佳性能以增加 DIV 的数量。

但这是我的问题，我在 Chrome 或 Safari 上使用 TimeLine 时发现了一个“渲染问题”。有时整个页面会在 Safari iPhone 或 Chrome Android+iPhone 上呈现出轻微的延迟。

因此，如果你们中的一个人准备好迎接挑战，请不要犹豫，我尝试了很多东西，但我不知道如何避免这种昂贵的重绘。

顺便说一句，如果你们中的一个人有优化此片段的额外想法，请不要犹豫回复。

谢谢

---------- 更新 1 ----------

根据 Ariya 的建议，我通过代码（url）更新并仅使用顶部/左侧添加了另一个测试。根据 Chrome 提供的 FPS 计数器，我可以看到使用几乎相同帧速率的顶部/左侧属性时 fps 更稳定。您是否知道我是否可以优化 CSS3 版本以获得更好的性能？我虽然带有 GPU 加速的 css3 会更快，但我可能做错了什么。

---------- 更新 2 ----------

我更新了我的代码以使用 requestAnimFrame 并且只在我需要重绘时触发它。我发现导致我在 css 中定义的 perf 灰色渐变背景的原因是经常重绘并影响性能。然而，从纯粹的性能角度来看，上/左似乎仍然比 CSS 过渡更好:(。

4

1 回答 1

1

在谷歌浏览器的开发者工具中查看时间轴配置文件时，很明显有很多样式重新计算。这应该归咎于这一特定行：

      lastSheet.insertRule('@-webkit-keyframes '+keyframeName+' { ....

换句话说，不断改变样式表是昂贵的。由于本例中的元素动画是关于移动它们，而不是使用基于关键帧的动画，我建议简化为简单的过渡。

于 2013-01-12T06:37:11.090 回答