Является ли putImageData быстрее, чем drawImage?

#javascript #html #canvas

#javascript #HTML #холст

Вопрос:

Я думаю, что putImageData быстрее, чем drawImage, но мне нужно это доказать.

Я думаю, это тот же случай, что и с Flash и его классами Bitmap и BitmapData. По сути, BitmapData облегчает невизуальное извлечение данных из объекта Bitmap, что позволяет очень легко и быстро манипулировать ими.

Я предполагаю, что в высокопроизводительных случаях, таких как игры, извлечение ImageData из каждого изображения (например, каждого спрайта) и кэширование его в словаре «assets» является лучшим решением, чем многократное рисование самих спрайтов на холсте.

Может ли кто-нибудь это доказать?

Ответ №1:

Я не ставлю себе в заслугу объединение этого теста, но вы можете четко видеть производительность использования drawImage() как с холстом, так и с изображением, а также производительность putImageData() here:

http://jsperf.com/canvas-drawimage-vs-putimagedata/3

На данный момент drawImage() намного быстрее, чем putImageData() . Последнее, что я слышал, это не было предназначено, и разработчики браузера искали пути улучшения разрыва в производительности.

1. Я понимаю. Мой браузер показывает то же самое. Однако в этом нет особого смысла. Я ожидал, что выполнение манипуляций с использованием ImageData намного быстрее, чем открытие изображения, извлечение его данных и размещение их на холсте. По крайней мере, во Flash манипулирование BitmapData является предпочтительным методом для выполнения операций с производительностью

2. То, как классическая Flash (а не новая Stage3D / Molehill) оптимизирует все, находится в основной памяти, а затем копирует ее в графическую память. Холсты находятся в основном в графической памяти (в зависимости от браузера / версии / фазы Луны), и для изменения пикселей с помощью javascript эти imagedata необходимо будет скопировать в основную память. Затем, чтобы нарисовать эти данные изображения, вам нужно скопировать их обратно в графическую память.

3. Чтение графической памяти с основного процессора происходит ОЧЕНЬ МЕДЛЕННО почти на всех видеокартах… Посмотрите на спецификации для чтения памяти RSX из ячейки на PS3 (запись 4 ГБ / с против чтения 16 МБ / с {{в 256 раз медленнее!}}) ps3devwiki.com /… (Ячейка — это основной процессор, а RSX — графический процессор, разработанный Nvidia)

4. Ссылка, отображающая ошибку приложения. Есть ли вероятность новой ссылки?

5. Ссылка дает «Сбой этой бессерверной функции».

Ответ №2:

Для больших холстов я обнаружил, что это не имеет большого значения, но putImageData определенно не так эффективен, как drawImage для копирования холстов.

Вот несколько тестовых примеров, которые я использовал: http://jsperf.com/canvas-size-test-case/3

В итоге у меня возникли некоторые проблемы с производительностью из-за общего размера исходного холста, независимо от размера данных, которые я фактически копирую.