改进位图图像在转换为视图时的解码性能

Question

我正在开发一个应用程序，该应用程序将幻灯片转换为视图作为主要导航机制。进来的第一张幻灯片涉及几个超级强加的PNG，其大小约为2000px，具有透明度，当图像进入视野时，帧速率出现了显著的停顿。

使用Chrome Dev Tools的Timeline功能，我已经确定，虽然大多数单独的绘制任务每次耗时不到5毫秒，但重要的异常值是那些绘制事件，它们的子任务包括解码PNG，一个接一个地耗时50到100毫秒，似乎是在图像进入视图的那一刻。

理想情况下，我希望提前解码位图，但如果不在视图中实际渲染位图，我想不出强制执行这种行为的方法。有什么想法吗？

Answer 1

如果瓶颈是解码，那么将图像预渲染到画布上，然后将这些预渲染的画布绘制到视图画布上，或者使用CSS将其翻译。