[Temp] Бенчмарк HTML5 Blizzard: проверьте аппаратное ускорение вашего браузера

В Internet Explorer 9 вся веб-платформа полностью аппаратно ускоренна. Клиенты выиграют от аппаратного ускорения тех сайтов, которые они посещают, а разработчики выиграют от аппаратного ускорения всех технологий, которые они используют (HTML4, HTML5, SVG, CSS, JavaScript, аудио, видео и многое другое).

Мы рады, что другие производители браузеров решили последовать нашему примеру и аппаратно ускорить свои браузеры. Мы вместе движемся вперед в развитии Сети таким образом, который стал бы серьезным преимуществом для клиентов и позволил всем получить новый опыт в Интернете. Браузеры используют различные архитектурные подходы к аппаратному ускорению, важную роль при этом играет способ аппаратного задействование и количество потребляемых ресурсов (графические процессоры, многоядерные процессоры, ячейки памяти и т.д.).

В этой статье пойдет речь о демо версии бенчмарка HTML5 Blizzard, который мы выпустили, чтобы пожелать всем счастливых праздников. HTML5 Blizzard использует общие веб-технологий вместе, чтобы узнать, сколько снежинок браузер может анимировать в режиме реального времени (60 кадров в секунду). Когда частота смены кадров выше 60 кадров в секунду - снежинки добавляются, а когда частота кадров падает ниже 60 кадров в секунду - снежинки будут удаляться, пока браузер не достигает равновесия при 60 кадрах в секунду. Чем больше снежинок браузер сможет анимировать в режиме реального времени - тем выше итоговая оценка.

Браузер, который аппаратно ускоряет лишь некоторые из технологий, используемых в HTML5 Blizzard будет иметь оценку ниже, чем тот браузер, который эффективно использует все ресурсы компьютера для аппаратного ускорения.


Шаг за шагом: Как работает HTML5 Blizzard

Фон неба (HTML5 Canvas Gradient)
Синий фон Blizzard-демо использует Canvas API для программного создания линейного градиента кистью и рисует фоновый градиент. Весь этот процесс является аппаратно ускоренным в IE9 и создает фон неба.


Поздравления с праздниками (DIV с WOFF шрифтом)
Расположенный на фоне, закрепленный на двух позициях, содержащих текст HTML DIV, желающий всем счастливых праздников. Эти DIV являются стилем с использованием стандартных CSS свойств и прорисованы WOFF шрифтом. Все тексты в IE9, включая стили текста при условии использования шрифтов WOFF - являются аппаратно ускоренными.



Снежный покров (SVG-изображение)
В нижней части окна векторное изображение SVG представляет снежный покров. С помощью SVG можно динамически масштабировать изображение в ширину окна и поддерживать гладким сглаживанием кривых. В IE9 все SVG графика предназначена изначально для графического процессора и аппаратно ускоренна


Снеговик (Изображение HTML5 Canvas)
Ни одна зимняя сцена не обходится без танцующего снеговика. Он расположен в центре экрана и является вторым canvas-объетом, где мы рисуем изображения разных поворотов и используем методы анимации JavaScript, чтобы создать эффект танца снеговика. Поворот, масштабирование, и рисование изображений с массовым параллелизмом ложиться на в IE9 на графический процессор.


Снежинки (текст HTML5 Canvas)
Мы должны показать людям, как много снежинок падают на экране, и мы делаем это посредством возможностей текста HTML5 Canvas, который позволяет сделать текст непосредственно на поверхности canvas. Рисования и композитинг этого текста также аппаратно ускоренны в IE9.


Падающие снежинки (HTML5 Canvas Image Strip)
Это забавная, но важная часть бенчмарка, которая программно добавляет и удаляет снежинки, пока не достигнется точки равновесия в 60 кадров в секунду (16.7ms). Снежинки взяты из одной полосы индексированного изображения и все индексации и отсечения происходят в IE9 с помощью графического процессора.


Кнопка возврата (DIV с CSS3 непрозрачностью)
Как и на многих веб-страницах есть кнопка, которая позволяет пользователю вернуться на главную страницу сайта. Эта кнопка сайта расположена в верхней части страницы и расположена выше всех других данных и использует свойства CSS3 непрозрачности. В IE9 применения этих свойств CSS3 происходит исключительно за счет графического процессора.


Информационная панель (WOFF в тексте HTML5 Canvas )
Вдоль нижней части сцены вы найдете общую информацию производительности, включая текущий размер окна и как долго заняло создание одного анимированного кадра. Эта информация помещена на непрозрачный фон, используя текстовые возможности canvas и WOFF шрифты. Это хороший пример того, как выигрыш в производительности аккумулируется в IE9, когда все функции аппаратно ускоренны (canvas, текст canvas и шрифты WOFF) и используются вместе.


Фоновая музыка (HTML5 аудио)
В браузерах, которые поддерживают воспроизведения MP3 аудио файлов через тэги HTML5 аудио, праздничная музыка будет играть в фоновом режиме, пока бенчмарк работает. В IE9 мы воспользовались аппаратным ускорением аудио для выполнения аудио декодирования и воспроизведения непосредственно аппаратно, когда это возможно.



Бенчмарк в целом
Эти индивидуальные особенности веб-платформы собрались вместе, чтобы создать веселую и полностью аппаратное ускоренную зимнюю сцену. Все, что вы видите в демо, выполняется с помощью графического процессора.



Полное аппаратное ускорение
Цель Internet Explorer 9 заключается в предоставлении фундаментальных прав через браузер, чтобы разработчики создавали надежную и быструю платформу. Демо HTML5 Blizzard является прекрасным примером того, как веб-разработчики будут использовать различные технологии вместе творческими и естественными способами. Простое ускорение частей веб-платформы, такие как композиции или canvas, позволит повысить производительность, но не возымеет такой же эффект, когда полностью ускоренна вся веб-платформа.

Какая оценка у вас?

Джейсон Вебер (Jason Weber),
ведущий менеджер Internet Explorer


Источник: http://blogs.msdn.com/b/ie/archive/2011/01/26/html5-blizzard-full-hardware-acceleration-in-action.aspx
Перевод: houseboy