Какая разница в скорости между рисунком с холстом html5 и html и javascript?

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

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

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

Ответы

Ответ 1

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

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

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

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

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

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

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

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

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

Ответ 2

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

Плюсы использования HTML5 Canvas:

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

Ответ 3

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