Архитектура полного аппаратного ускорения веб-страниц

Мы рады, что другие браузеры начали использовать аппаратные средства для увеличения производительности обработки графики на веб-страницах. С появлением различных реализаций, которые уже доступны, самое время для написания статьи о различии между полным и частичным аппаратным ускорением.

В ноябре 2009 года на PDC было впервые было представлено аппаратное ускорение графики в браузере. В марте 2010 был выпущен IE9 Platform Preview с включенным по умолчанию аппаратным ускорением графики в HTML5 ("GPU-powered HTML5"). В этом релизе аппаратное ускорение применялось ко всем элементам на всех веб-страницах, будь то текст, изображения, фон, границы, SVG элементы, HTML5 видео и аудио, используя средства DirectX. С выходом в июле Platform Preview 3, в IE9 представлен элемент управления HTML5 canvas с аппаратным ускорением.


Понимание технологии аппаратного ускорения
Браузер может использовать средства аппаратного ускорения на некоторых или на всех этапах рендеринга HTML страницы, а так же вообще не использовать аппаратное ускорение. Диаграмма, представленная ниже, иллюстрирует основные этапы рендеринга HTML страницы в IE9.

• Визуализация контента. IE9 ускоряет первую фазу рендеринга страницы - рендеринг контента, используя подсистемы Windows Direct2D и DirectWrite. Как было показано в ноябре, результатом ускорения этой фазы является более гладкий текст и векторная графика. Ускорение этой фазы, используя графический процессор, улучшает производительность наиболее распространенных элементов HTML: текст, изображения, фоны, и границы.
• Композиция страницы. IE9 использует технологию Direct3D для следующей фазы рендеринга HTML - составных частей веб-страницы, что дает IE9 удивительную производительность при отображении страниц, активно использующих различную графику, например Flying Images и FishIE Tank. Ускорение этой фазы с помощью графического процессора использует одну из основных возможностей GPU - прорисовка изображений на очень высокой скорости. Кроме того, в памяти видеокарты сохраняются последние изображения, поэтому перерисовка страницы с тяжелыми изображениями значительно ускоряется.
• Композиция рабочего стола. После того, как браузер закончил рендеринг контента и составил итоговую страницу, Windows Vista и Windows 7 используют графический процессор для составления итогового изображения на экране, используя Desktop Window Manager (DWM). Поскольку IE9 использует только DirectX, то достигается наилучшее взаимодействие между IE и DWM, используется меньше видеопамяти и достигается большая стабильность работы, чем у браузеров, использующих сочетание различных технологий.

Полное или частичное ускорение
В IE9 разработчики получили в свое распоряжение графический конвейер от разметки страницы до изображения на экране. Основываясь на записях разработчиков в своих блогах, реализации аппаратного ускорения в других браузерах в основном ускоряют одну фазу рендеринга или другую, но не все фазы сразу. Предоставление полного аппаратного ускорения является архитектурным обязательством. Когда есть желание, чтобы браузер работал на нескольких платформах, разработчикам приходится вводить некий уровень абстракции и идти на компромиссы, которые, в конечном счете, влияют на производительность и уменьшают возможность браузера достичь исконно присущей, максимальной производительности. Получение максимальной производительности от GPU является весьма сложной задачей, требующей написания дополнительных промежуточных уровней и библиотек, а нативная поддержка операционной системы делает ее еще сложнее. Продолжительное использование Windows DirectX в самых требовательных 3D играх позволило с помощью DirectX получить наивысшую производительность в рендеринге графики с помощью GPU.

При работе в других браузерах с поддержкой аппаратного ускорения, вы можете заметить, что результаты производительности части примеров с сайта IE Test Drive сопоставимы с результатами, полученными в IE9, а на другой части примеров нет. Различия отражают разрыв между полным и частичным аппаратным ускорением. Поскольку в IE9 включена поддержка новых, только появляющихся стандартов, их реализация будет так же полностью аппаратно-ускорена.

Аппаратное ускорение видео в HTML5 является отличным тому примером. На конференции MIX10 преимущества использования аппаратного ускорения для видео. В марте, IE9 без проблем проигрывал на нетбуке два HD 720p видеофайла, незначительно загружая центральный процессор в то время, как в другом браузере, максимально загрузившим ЦП, наблюдалось выпадение кадров и проигрывался только лишь один видеофайл. Благодаря полному аппаратному ускорению всего конвейера вы можете наслаждаться более высокой производительностью при воспроизведении этих видео во время перемещения их по странице, а также при использовании стилей и сочетании их с прозрачностью, за счет использования стандартных средств веб-разметки.


Измерение производительности графики
Стандартной мерой производительности графики является количество кадров в секунду (FPS). Она показывает, сколько раз в секунду браузер сможет обновить изображение на экране компьютера. Относитесь скептически к тем демонстрационным примерам, которые выдают fps больше 60. Причина проста: у большинства компьютеров частота обновления экрана составляет 60 Гц. Хотя и возможно прорисовать страницу более 60 раз в секунду, большинство пользователей этого просто не увидят. Дополнительные циклы центрального и графического процессора, которые необходимы для увеличения fps сверх частоты обновления вашего монитора, будут потрачены впустую. Именно поэтому тесты производительности графики на сайте IE9 Test Drive явно ограничивают fps до 60 - чтобы предотвратить потерю ресурсов, представляющих контент, который вы не сможете увидеть.

Гораздо интереснее, чем простые измерения количества кадров в секунду, узнать что именно делает ваш компьютер. Используя Windows Performance Analysis Tools, разработчики могут увидеть, что другие браузеры с поддержкой аппаратного ускорения используют от 20% до 500% больше процессорного времени, чем IE9 для прорисовки одного кадра. В зависимости от графических операций, требуемых для представления веб-страницы, будет меняться и затраченное процессорное время. Если это дополнительное потребление ресурсов ЦП происходит между визуальными обновлениями (16.7 миллисекунд на стандартном 60 Гц дисплее), различие, возможно, не будет видно пользователю, однако это влияет на выполнение других задач вашим компьютером. Чем меньше нагрузка на ЦП, тем лучше общее быстродействие системы.


Помните, в реальном мире производительность многоаспектна
Джейсон Вебер недавно написал, что производительность графики - одна из 11 базовых подсистем в современных браузерах. Аппаратное ускорение графики может существенно повысить производительность любой веб-страницы, что наиболее важно для страниц, интенсивно использующих графику, а так же для демонстрационных страниц, предназначенных для оценки производительности. Все подсистемы браузера должны хорошо работать сами по себе, а так же друг с другом. Только тогда мы сможем получить высокоскоростную работу в сети.


Улучшения работы в интернете для Windows
Мы рады, что другие браузеры начинают оптимизировать для работы на платформе Windows. Использование аппаратных средств компьютера через Windows API делает просмотр веб-страниц на Windows лучше, чем на других системах. Начиная с первого демонстрационного примера в ноябре прошлого года, разработчики других браузеров начали работу над аппаратным ускорением рендеринга, используя семейство DirectX Windows API. Аппаратное ускорение - важная часть производительности HTML5. Помните, что не все аппаратное ускорение одинаково. Сегодня, IE9 - первый и единственный браузер, предоставляющий полное аппаратное ускорение всего контента HTML5.

Тед Джонсон (Ted Johnson),
ведущий руководитель команды разработчиков по веб-графике


Источник: http://blogs.msdn.com/b/ieru
Перевод: Dasus