JavaScript — холст HTML5 против SVG против Div

Краткий ответ:

SVG будет проще для вас, так как выделение и перемещение его уже встроены. Объекты SVG являются объектами DOM, поэтому они имеют обработчики «щелчка» и т. Д.

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

У Canvas лучшая производительность, но вы должны сами реализовать все концепции управляемого состояния (выбор объекта и т. Д.) Или использовать библиотеку.

HTML5 Canvas — это просто поверхность для рисования битовой карты. Вы настраиваете рисовать (скажем, цветом и толщиной линии), рисуете эту вещь, и тогда Canvas не знает об этой вещи: он не знает, где она или что вы только что нарисовали, это только пиксели.

SVG, с другой стороны, должен поддерживать ссылки на каждый объект, который он отображает. Каждый создаваемый вами элемент SVG / VML является реальным элементом в DOM. По умолчанию это позволяет вам намного лучше отслеживать создаваемые элементы и упрощает работу с такими событиями, как события мыши, по умолчанию, но значительно замедляется при наличии большого количества объектов.

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

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

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

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

Я сделал тестовые страницы Canvas и HTML DIV, у обоих были подвижные «узлы». Узлы холста были объектами, которые я создал и отслеживал в Javascript. Узлы HTML были подвижными Div.

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

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

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

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

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

Заключение:

  • SVG, вероятно, лучше для приложений и приложений с небольшим количеством элементов (менее 1000? Зависит от действительности)
  • Canvas лучше подходит для тысяч объектов и осторожных манипуляций, но для его запуска требуется намного больше кода (или библиотеки).
  • HTML-элементы Div неуклюжи и не масштабируются, создание круга возможно только с закругленными углами, создание сложных форм возможно, но включает в себя сотни крошечных крошечных элементов Div шириной в пиксель. Безумие наступает.
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector