Отрисовка интерфейса через Canvas

7 Окт
2011


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

Для начала надо четко ограничить предполагаемую сферу использования — разговор идет о веб-приложениях со сложным итерфейсом не предназначенных для массовых сервисов (типичные бизнес приложения — тьмы их). Для такого типа приложений нам не важна индексируемость контента (которая в случае канвас — нулевая) и мы можем не заботится о поддержке всего зоопарка браузеров (достаточно того что все будет хорошо работать хоть в одном браузере).
Для тестов был выбран наиболее часто используемый элемент — табличка с данными (Таблички на 500 000 строк или 200 столбцов — это суровая реальность бизнес приложений). Все тестовые страницы можно глянуть здесь.
Из личного опыта — наиболее критичным параметром является скорость отрисовки больших объемов данных — вот тут мы и посмотрим не может ли нам помочь канвас. Конечно при хорошем дизайне на экране не должно быть этих самых больших объемов данных, но на практике требования заказчики расходятся с идеалом.

Сложность использования


Как показала разработка теста — решение на канвас определенно сложнее и требует тщательной организации кода, чтобы в будущем легко менять внешний вид таблички, в этом плане css значительно удобнее.
Также есть ряд неочевидных моментов — при отрисовке через канвас, браузер пытается сгладить все линии, и приходится использовать не самый стандартный подход — в частности, вся табличка, нарисована заливками (fill) а не линиями.

Скорость отрисовки


Измерялись два параметра
— скорость отрисовки таблицы
— скорость изменения отдельной ячейки в уже отрисованной таблице
Chrome 9

Отрисовка (меньше — лучше)

Изменение данных (меньше — лучше)

Хотя канвас значительно проигрывает для отрисовки (шкала логорифмическая, поэтому разрыв реально большой), в сценарии с изменением данных — канвас показывает лучшие результаты. Причем скорость изменения в случае канваса не зависит от общего размера данных — она почти постоянна для всех тестов.
Также показательна разница между тестами «большой таблицы» и «большой таблицы со стилями». Усложнение внешнего вида мало сказывается на canvas решении, зато несколько замедляет HTML решение. Скорее всего, при дальнейшем усложнении стилей, разрыв между HTML и Canvas отрисовкой будет сокращаться.
Opera 11

Отрисовка (меньше — лучше)

Изменение данных (меньше — лучше)

У оперы всё печально с большими HTML таблицами, они отрисовываются просто безумно долго.
Прочие

Следующие браузеры справились с мелкой и средней таблицей но не смогли отрисовать канвас большего размера, поэтому своих графиков не удостоились.
  • FireFox 4b10
  • IE9
  • Chrome с включенным GPU ускорением

Сравнение разных браузеров

Тест для средней таблицы во всех браузерах (меньше — лучше)

В целом всё предсказуемо — Chrome и FF в лидерах. Несколько неожиданный результат дает включение GPU ускорения в Chrome (Chrome* на диаграме)

Ощущения от использования


Начиная со среднего размера и выше — таблицы отрисованные через HTML заметно притормаживают при скролировании (скорее всего броузер отрисовывает их не сразу, а на лету, чем и вызваны рывки во время скроллирования), канвас таблицы скроллируются плавно и без каких либо рывков.

Результаты, как я их вижу


Чуда не случилось. Хотя canvas и показывает весьма неплохие результаты, скорость отрисовки сходных интерфейсов через html все же выше.
Однако, в то же время, для отрисовки сложного интерфейса, в котором постоянно меняются какие то мелкие элементы — канвас может быть предпочтительнее за счет очень высокой скорости обновления (которая не требует пересчета и перерисовки всех связанных DOM элементов)
Как всегда выделилась Opera — это единственный браузер, в котором рисовать канвасом может быть реально быстрее чем делать то же через HTML.
Неприятно удивили браузеры поддерживающие апаратное ускорение графики — все они отказались работать с полотном превосходящим размеры экрана. Хотелось бы верить что это временно и будет исправлено в следующих/финальных версиях.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх