Одна из очень вкусных особенностей 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.
Неприятно удивили браузеры поддерживающие апаратное ускорение графики — все они отказались работать с полотном превосходящим размеры экрана. Хотелось бы верить что это временно и будет исправлено в следующих/финальных версиях.