Какая разница в скорости между рисованием с помощью html5 canvas и html и javascript?

Question

Я заинтересован в создании игры с использованием html и javascript. Мне было интересно, действительно ли это намного быстрее рисовать в html5 и javascript, чем с изображениями и div в html и javascript.

Пример игры, использующей html и javascript, которая прекрасно работает: http://scrabb.ly/

Пример игры, использующей html5 и javascript, которая прекрасно работает: http://htmlchess.sourceforge.net/demo/example.html

Answer 1

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

Я создал тестовые страницы Canvas и HTML, у обоих были подвижные "узлы". Узлы холста были объектами, которые я создал и отслеживал в Javascript. Узлы HTML были <div> с, хотя они также могли быть <image> или <video>.

Я добавил 100 000 узлов к каждому из моих двух тестов. Они выступили совсем по-другому:

Вкладка теста HTML загружалась вечно (по времени чуть меньше 5 минут, Chrome попросил убить страницу в первый раз). Менеджер задач Chrome говорит, что вкладка занимает 168 МБ. Когда я на него смотрю, это занимает 12-13% процессорного времени, когда я не смотрю, 0%.

Вкладка Canvas загружается за одну секунду и занимает 30 МБ. Это также занимает 13% процессорного времени все время, независимо от того, смотрит на него кто-то или нет.

Перетаскивание на HTML-странице происходит более плавно, что, как я полагаю, ожидается, поскольку текущая настройка заключается в перерисовке ВСЕХ каждые 30 миллисекунд в тесте Canvas. Для этого есть много оптимизаций для Canvas. (аннулирование холста является самым простым, также отсечение областей, выборочное перерисовывание и т. д. зависит только от того, насколько вы хотите реализовать)

Видео на странице HTML, хотя я не двигаю объекты, на самом деле идеально гладкое .

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

Только рисование / загрузка * на 1022 * далеко * на 1023 * быстрее в Canvas и гораздо больше возможностей для оптимизации (т. Е. Исключить вещи, находящиеся за кадром, очень легко).

Answer 2

Быстро, как при более быстром рендеринге или более быстрой разработке?Я бы сказал, что ответом на оба является HTML5 canvas.Хотя это довольно новая технология, и она еще не поддерживается всеми основными браузерами, она уже обладает гораздо большей функциональностью, чем вы могли бы использовать DIV с обычным HTML.Я раньше рисовал с помощью div, и это было невероятно сложно просто заставить что-то работать.С холстом у вас уже есть рамки, чтобы сделать самый основной рисунок.Кроме того, HTML5 является новым.Даже если это будет относительно медленнее, чем рисование с использованием div-ов прямо сейчас (что, вероятно, не так), эта производительность будет увеличиваться по мере развития разработки и внедрения.Я не могу сказать то же самое для рисования с помощью divs.

Преимущества использования HTML5 Canvas:

• Аналогично другим каркасам рисования (OpenGL, DirectX)
• Будетдальнейшее повышение производительности и функциональности
• Может стать аппаратно ускоренным в будущем
• Возможные 3D-рамки в будущем

Answer 3

Ни одна из этих игр не требует HTML 5. scrabb.ly делает все с прямоугольными объектами, которые отлично справляются с divs, а игра в шахматы даже не использует анимацию.Если вы думаете о том, какую именно игру вы хотите создать, то то, что вы используете, должно решаться на основе знакомства и совместимости, а не производительности.