Реактивные веб-сайты

Использование processing.js для игры «Защита башнями»,

источник: willarson.com

Raphaеl

Если предыдущий пример был посвящен использованию Canvas больше

в развлекательных целях, то библиотека Raphael.js (http://raphaeljs.com/)

преследует сугубо практические цели (хотя и делает это с помощью SVG +

VML). С ее помощью можно удобно и красиво представлять различные объ-

емы данных во всем привычном формате графиков.

Применение этой библиотеки предельно просто: обычно нужно объя-

вить необходимые данные и задать один из множества доступных представ-

лений (или создать свое собственное). Более подробно с данной библиоте-

кой можно ознакомиться на ее официальном сайте —http://raphaeljs.com/.

6.6.5. e?O·IAI? ·?OU?O‰AEOU‚E?

На данный момент Canvas при решении большинства задач справляет-

ся быстрее, чем SVG. Достаточно давно был разработан пример использова-

ния Canvas для ряда задач Google Maps (http://www.ernestdelgado.com/

gmaps/canvas/ddemo1.html). В нем зафиксирован прирост скорости в 200-

500% (для всех браузеров, которые поддерживают Canvas).

———————— Page 232————————

1

3

Технологии будущего 2

Рис. 6.8. Пример использования Raphael.js для отображения данных,

источник: raphaeljs.com

Рис. 6.9. Быстродействие Canvas, источник: www.ernestdelgado.com

В результате другого тестирования (http://prototype-graphic.xilinus.com/

samples/shape.html) Canvas также демонстрирует значительное преиму-

щество перед SVG, но менее широкий набор возможностей.

В качестве примера можно привести еще один тест

(http://intertwingly.net/ stories/2006/07/10/penroseTiling.html) скоро-

сти отображения объектов в Canvas и SVG. Здесь SVG снова проигрывает

(но совсем незначительно, в большинстве браузеров разницы почти нет).

Для уточнения вопросов производительности можно обратиться к

исследованию (http://www.borismus.com/canvas-vs-svg-performance/),

установившему закономерность между производительностью SVG, Canvas

и параметрами изображения. В результате оказывается вполне очевид-

———————— Page 233————————

232 РЕАКТИВНЫЕ ВЕБ-САЙТЫ

Рис. 6.10. Возможности и быстродействие Canvas,

источник: prototype-graphic.xilinus.com

Рис. 6.11. Сравнение быстродействия Canvas и SVG, источник: intertwingly.net

ным, что при увеличении числа объектов (для SVG — векторных) произ-

водительность SVG падает сильно (почти экспоненциально), а Canvas ос-

тается на стабильном уровне. Здесь стоит отметить, что размер активной

области при этом не изменяется.

———————— Page 234————————

3

3

Технологии будущего 2

Рис. 6.12. Производительность Canvas и SVG при увеличении числа объектов,

источник: www.borismus.com

Однако если мы начнем увеличивать область построения (размеры

объектов), то тут векторный формат показывает себя во всей красе: про-

изводительность практически не меняется. Производительность Canvas

падает (как и следовало ожидать) квадратичным образом от числа объек-

тов (площадь активной области увеличивается квадратично).

Рис. 6.13. Производительность Canvas и SVG при увеличении размера объектов,

источник: www.borismus.com

———————— Page 235————————

234 РЕАКТИВНЫЕ ВЕБ-САЙТЫ

Из этого можно сделать простой вывод: если вы собираетесь исполь-

зовать точечную (пиксельную) графику, то лучше Canvas для этой цели

ничего не подходит. При работе с большими (по площади) векторными

объектами лучше применять SVG. Также будет необходимо дублировать

всю функциональность через VML для IE 8 и ниже.

6.7. C??EOI?AI O?E OOIO?E Web Workers

Данный раздел написан под

впечатлением статьи Джона Ресига

«Computing with JavaScript Web

Workers» (http://ejohn.org/blog/

web-workers/), в которой он рас-

крыл особенности встроенного в

браузеры механизма «отложенных»

вычислений при помощи JavaScript

и его будущие перспективы.

Последняя спецификация Web Workers, несомненно, является наиболее

перспективной из грядущих нововведений в браузерах, которая позволяет

исполнять JavaScript-задачи параллельно, не блокируя интерфейс браузера.

Обычно для того, чтобы добиться более-менее приемлемых вычисле-

ний при помощи JavaScript-движка, необходимо было разбивать всю ра-

боту на небольшие части и запускать их друг за другом при помощи тай-

мера.