Холст HTML5: лучше повторно рисовать объекты или использовать растровые изображения?

В моем проекте есть холст HTML5, на котором многократно нарисованы графические объекты. Эти объекты быстро меняются. Для их рисования требуется время. Как я могу сделать это быстрее?

Объекты не слишком сложны, но содержат такие предметы, как дуги, градиенты, полигоны.

Внешний вид объекта зависит от примерно 10 свойств, каждый из которых имеет одно из около 10 значений. Это означает, что существует только около 100 различных явлений, чем объект может иметь. Вот почему я думаю о том, чтобы рисовать каждый раз один раз, а затем кэшировать растровое изображение для повторного использования.

Все должно работать на клиенте (т.е. я не могу использовать готовые изображения)

Каким будет лучший способ сделать это с помощью холста HTML5?
Это хорошая идея вообще или накладные расходы на работу с растровыми изображениями больше, чем повторное рисование объектов каждый раз?

Ответ 1

Кэш кеша кеша! Проверьте эту статью Саймона Сарриса и мои собственные выводы, В основном вы создаете холст в памяти, копируя содержимое там, и вы можете их повторно использовать. Вы увидите огромное увеличение производительности, делая это.

Вращающиеся спрайты без кеширования

Вращение спрайтов с кешированием (пройдите вверх, чтобы найти зомби)

Во втором примере вы должны увидеть значительное улучшение.

ИЗМЕНИТЬ

jsfiddle пример кэширования

Пример jsfiddle не кэширован

Саймон опубликовал это в комментариях, которые должны действительно прояснить ситуацию, если вы не можете увидеть прирост производительности, просто посмотрев на демонстрации.

Выводы JSperf Саймона Сарриса

Ответ 2

В зависимости от того, сколько объектов могло измениться за секунду, и, следовательно, сколько объектов нужно перерисовать и как - в течение одной секунды, перерисовка больше, чем кеширование, может быть вполне возможным.

На общем основании я бы предложил рассмотреть следующий путь принятия решения.

Вы упомянули, что может появиться 100 различных способов отображения одного из ваших объектов.

Это можно считать похожим на минимум теоретически возможных переходов состояний, равных 99 ^ 2 для каждого из ваших объектов.

Являются ли эти переходы статуса резкими по форме/размеру/цвету, но они все еще хорошо идентифицированы, обозначены и управляемы? Если это так, кэширование всего за один раз 100 различных явлений, которые будут использоваться всеми вашими объектами, может значительно повысить производительность.

И наоборот, если - например, - фон вряд ли изменится, а нарисованная часть занимает менее значимую часть области объекта, которую вы могли бы серьезно рассмотреть, перерисовывая ее каждый раз.

Фактически, предварительно обработанное изображение не может соответствовать вашим потребностям в производительности, если ваш нарисованный объект изменяется динамически и особенно на постоянной основе, поскольку предварительно обработанное изображение необходимо полностью рисовать при каждом переходе состояния при перерисовке объекта может означать меньшую вычислительную нагрузку.