css - 提高转换为 View 时位图图像解码的性能

Question

我正在开发一个应用程序，其中涉及将幻灯片转换为 View 作为主要导航机制。第一张幻灯片涉及几个叠加的 PNG，大约 2000 平方像素，带有透明胶片，当图像进入 View 时，帧率出现明显的停顿。

使用 Chrome Dev Tools 的时间轴功能，我已经确定虽然大多数单独的 Paint 任务每个都花费不到 5 毫秒，但重要的异常值是那些子任务包括解码 PNG 的 Paint 事件，每个任务需要 50 到 100 毫秒一个接一个，似乎在影像映入眼帘的那一刻。

理想情况下，我想提前解码位图，但我想不出一种方法来强制执行此行为，而不实际将它们呈现在 View 中。有什么想法吗？

Answer 1

如果瓶颈是解码，则将您的图像预渲染到 Canvas ，然后将这些预渲染的 Canvas 绘制到您的 View Canvas 或使用 CSS 转换它们。