Лучше ли иметь один большой холст или до 100 небольших динамически созданных холстов?

Я работаю над мобильным веб-симулятором. Первоначальный прототип находится здесь: http://dicewalla.com

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

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

Ответ 1

С точки зрения производительности, как было упомянуто ранее, разница между 1-100 элементами холста должна быть небольшой, если вы не обновляете графику на регулярной основе. (то есть: статическая графика/нет анимации)

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

Сказав, что вы делаете с dicewalla, похоже, что он ничего не выиграет от того, чтобы иметь несколько холстов.

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

Ответ 2

Несколько холстов обычно позволяют повысить производительность, так как вы можете выборочно перерисовывать.

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

Кроме того, вы не должны видеть заметной разницы в загрузке 1 canvas против 100.