提高在翻译成视图时位图图像解码的性能 [英] Improving performance on bitmap images decoding on translating into view

问题描述

我正在开发一个涉及幻灯片转换为视图作为主要导航机制的应用程序。第一张幻灯片包括几个重叠的PNG，透明度大约为2000像素，并且在图片进入视图时出现了显着的帧率。

I'm developing an application which involves a slides translating into view as the primary navigation mechanism. The first slide to come in involves several super-imposed PNGs at roughly 2000px squared with transparencies, and there's a notable framerate stutter as the images come into view.

使用Chrome Dev工具的时间线功能我已经确定，虽然大多数单独的Paint任务每个不到5毫秒，显着的异常值是Paint事件，其子任务包括解码PNG，一个接一个接一个在50和100毫秒之间，似乎在

Using Chrome Dev Tools' Timeline feature I've established that while most of the individual Paint tasks take under 5 milliseconds each, the significant outliers are those Paint events whose subtasks include decoding the PNGs, which take between 50 and 100 milliseconds one after the other, seemingly at the moment the images come into view.

理想情况下，我想提前解码位图，但我不能想到强迫这种行为没有实际的方式渲染它们在视图中。任何想法？

Ideally I would like to decode the bitmaps ahead of time, but I can't think of a way of forcing this behaviour without actually rendering them in view. Any ideas?

推荐答案

如果瓶颈是解码，然后将图像预渲染到画布上，渲染的画布到您的视图画布或使用CSS翻译它们。

If the bottleneck is decoding, then pre-render your images to a canvas, and then either draw those pre-rendered canvases to your view canvas or translate them in using CSS.

这篇关于提高在翻译成视图时位图图像解码的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！