Отбрасывание кроликов обратно к растровым изображениям в бенчмарке Blitzkrieg!
ДАААААААААА! Пиратский эталон:
Вопрос на миллион долларов…
Так что быстрее? Что ж, мои выводы показали мне, что в большинстве случаев использования Canvas быстрее, чем DOM… намного быстрее. Сначала у них почти одинаковая скорость, но я начал терять кадры в секунду, так как количество спрайтов накапливалось намного раньше с DOM, чем с Canvas.
Однако так было не всегда. На самом деле, если бы мы провели эти тесты год или около того назад, я уверен, что DOM вытер бы пол с помощью Canvas. Когда-то было время, когда CSS3 был почти единственной аппаратно-ускоренной частью браузера, и Canvas работал как задница по сравнению с ним. Но времена изменились. Canvas теперь имеет собственную марку аппаратного ускорения, которая помогла ему догнать и даже обогнать DOM по скорости.
Однако DOM по-прежнему работает лучше в определенных ситуациях. Если вам нужно меньше, но больше спрайтов для вашего проекта, то DOM — отличный вариант. Также я слышал, что CSS3 работает быстрее на некоторых старых устройствах, чем Canvas. Но в целом, и особенно на основе экспериментов с приведенными выше примерами, я пришел к выводу, что Canvas — это новый Speedy Gonzales из двух.
Мысль об использовании CSS для создания игр
CSS по своей природе является декларативным языком, поэтому он предназначен для описания результата. Использование CSS для создания супердинамического контента (я имею в виду игры, а не простую анимацию) для меня похоже на засовывание квадратного колышка в круглое отверстие. Установка строкового значения для перемещения чего-либо в каждом кадре кажется странной, как будто я использую браузер для чего-то, для чего он не предназначен. Не столько использовать кувалду, чтобы расколоть грецкий орех, сколько, скажем, использовать сову, чтобы поменять лампочку!? Это просто немного странно!
displayObject._div.style["-webkit-transform"] = " matrix3d("+transform[0]+", "+transform[1]+", 0, 0, "+transform[3]+", "+transform[4]+", 0, 0, 0, 0, 1, 0, "+ transform[2] +", "+ transform[5] +", 0, 1)"
Я думаю, довольно уродливый код… Javascript — процедурный язык, поэтому он описывает алгоритм и этапы процесса. Использование Canvas (и webGL) для игр и некоторых типов мультимедийного контента кажется гораздо более подходящим с точки зрения кода.
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
Гораздо приятнее! Весь этот контроль, основанный на Javascript, мне кажется намного лучше :)
Я думаю, самое важное, что нужно помнить об этом, это то, что все технологии существуют для решения какой-то проблемы и имеют сильные и слабые стороны, которые делают их подходящими для одних вещей, но не для других.
Canvas отлично подходит для создания игр и богатого опыта, но он также является «черным ящиком» и терпит неудачу, когда дело доходит до текста, макета и SEO. Мой совет: изучите все и знайте, что каждый когда-нибудь пригодится! :)
