Проблемы быстродействия. Технологии будущего. Оптимизация структуры веб-страниц
Появление Canvas
Основные возможности
Примеры использования Canvas, SVG и VML
Проблемы быстродействия
На данный момент Canvas при решении большинства задач справляется с ними быстрее, чем SVG. Достаточно давно был разработан пример использования Canvas для ряда задач Google Maps (http://www.ernestdelgado.com/gmaps/canvas/ddemo1.html). В нем зафиксирован прирост скорости в 200-500% (для всех браузеров, которые поддерживают Canvas).
Рис. 6.9. Быстродействие Canvas, источник www.ernestdelgado.com
В результате другого тестирования (http://prototype-graphic.xilinus.com/samples/shape.html) Canvas также демонстрирует значительное преимущество перед SVG, но менее широкий набор возможностей.
Рис. 6.10. Возможности и быстродействие Canvas, источник prototype-graphic.xilinus.com
Также можно привести еще один тест (http://intertwingly.net/stories/2006/07/10/penroseTiling.html) скорости отображения объектов в Canvas и SVG. Здесь SVG снова проигрывает.
Рис. 6.11. Сравнение быстродействия Canvas и SVG, источник ntertwingly.net
Для уточнения вопросов производительности можно обратиться к исследованию (http://www.borismus.com/canvas-vs-svg-performance/), установившему закономерность между производительностью SVG, Canvas и параметрами изображения. В результате оказывается вполне очевидным, что при увеличении числа объектов (для SVG - векторных) производительность SVG падает сильно (почти экспоненциально), а Canvas – остается на стабильном уровне. Здесь стоит отметить, что размер активной области при этом не изменяется.
Рис. 6.12. Производительность Canvas и SVG при увеличении числа объектов, источник www.borismus.com
Однако если мы начнем увеличивать область построения (размеры объектов), то тут векторный формат показывает себя во всей красе: производительность практически не
меняется. Производительность Canvas падает (как и следовало ожидать) квадратичным образом от числа объектов (площадь активной области увеличивается квадратично).
Рис. 6.13. Производительность Canvas и SVG при увеличении размера объектов, источник www.borismus.com
Из этого можно сделать простой вывод: если вы собираетесь использовать точечную (пиксельную) графику, то лучше Canvas для этой цели ничего не подходит. При работе с большими (по площади) векторными объектами лучше использовать SVG. Также будет необходимо дублировать всю функциональность через VML для IE 8 и ниже.