【发布时间】：2013-12-21 06:05:47
【问题描述】：
我正在开发一个应用程序，其中涉及将幻灯片转换为视图作为主要导航机制。进来的第一张幻灯片涉及几个大约 2000 像素平方的叠加 PNG，并带有透明胶片，当图像进入视野时，会有明显的帧速率卡顿。
使用 Chrome 开发工具的时间轴功能，我已经确定，虽然大多数单独的 Paint 任务每个花费不到 5 毫秒，但重要的异常值是那些子任务包括解码 PNG 的 Paint 事件，这需要 50 到 100 毫秒一个一个接一个，似乎是在图像映入眼帘的那一刻。
理想情况下，我想提前解码位图，但我想不出一种方法来强制这种行为而不实际将它们呈现在视图中。有什么想法吗？
【问题讨论】：
-
看来您可能需要利用硬件加速。看看：threejs.org
-
使用
transform和translate3d来解决这个问题。代替left和top使用。 -
@Ruirize 过渡正在应用于 3D 翻译。它有效地遵循 GPU 并且肯定比左/右动画更流畅。问题在于提前解码PNG图像。
-
@Diodeus GPU 处理已在使用中。 three.js 确实提供了对图像解码的精细控制，但是为了提高 DOM 结构中几个位图的性能而调用 3D 库将涉及太多的 hack 工作。
标签： css performance transform render paintevent