На чем (за счет чего) рендерится html? Почему svg рендерится не с помощью видеокарты?

Question

[Drovosek01]

Посмотрел видео HTML5 vs Qt и услышал, что там говорится, что интерфейс на Qt рендерится с помощью OpenGL, а интерфейс, сделанный с помощью Html5 - рендерится на процессоре (и возможно только некоторые его части рендерятся на OpenGL).

Так же я где-то слышал, что svg тоже рендерится "на процессоре", а вот canvas - на видеокарте.

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

Answer 1

[Mikhail Osher]

В добавок к ответу sim3x загуглите "web hardware acceleration".
По дефолту всё идёт через CPU. Можно для некоторых элементов включать GPU.

Answer 2

[sim3x]

Только малая часть рендеринга страницы перенесена на видеокарту
Большая часть вещей рендерится на цпу
Грубо говоря, цпу генерит сайт на всю высоту, а потом видеокарта определяет, что показать во вьюпорте

Про свг: свг1.1 очень крутая спека, если б ее внедрили (8+ лет назад) она б заменила весь цсс3 и сделала б все очень няшненько. Намного круче чем все есть сейчас
Но никто не захотел ее пилить

Comments

[Александр Аксентьев]

*видеокарту

[Drovosek01]

Почему так?

Насколько я знаю, в играх на CPU идет просчет логики ботов разрушений и т.д. а все, что касается отображения обрабатывается на GPU.

Почему в вебе большинство того, что касается отображения, обрабатывается на CPU? И можно ли где-то добыть ссылки с пруфами или как проверить это экспериментальным путем?

[sim3x]

Drovosek01,
Не во всех и не всегда и вообще все зависит от движка и то как его использовали

В вебе у вас нет просчета лучей или полигонов и тд и тп
Видеокарта не предназначена для работы с xml

Почему в вебе большинство того, что касается отображения, обрабатывается на CPU?

А что такого браузер с картинкой сделать может? Если б мог, то гифки б не тормозили как ад

И можно ли где-то добыть ссылки с пруфами или как проверить это экспериментальным путем?

теория для хромиум
https://www.html5rocks.com/en/tutorials/speed/layers/
https://developers.google.com/web/fundamentals/per...
https://developers.google.com/web/fundamentals/per...
https://www.fourkitchens.com/blog/article/fix-scro...
Сходу, как проверить кто рендерит и как написать код для проверки я не скажу

[Александр Попов]

А что такого браузер с картинкой сделать может? Если б мог, то гифки б не тормозили как ад

Простите, но они вроде и не тормозят, если их не очень много на странице)
Вообще говоря, проигрывание гифки - это простая и лёгкая по нагрузке операция для процессора, если сравнивать, например, с воспроизведением полноценного видео в 48 или 60 fps (потому что там довольно тяжёлый декодинг и в разы большее разрешение). Но даже такое видео неплохо проигрывается на не самых мощных компах, если видеоплеер "умный" и грамотно работает с видеокартой и её возможностями по ускорению отрисовки/декодирования. Да даже при программном декодировании на CPU можно смотреть видео в 60 fps Full HD абсолютно без фризов на Intel Core i5 2500K (4 ядра по 3.3 GHz). Фризы начнутся только тогда, когда проц сильно загружен, напимер в фоне висит свёрнутая игра и жрёт 40-50 процентов CPU. В самом деле, для плавного воспроизведения гифки нужно просто создать буфер в RAM, где будет храниться каждый следующий кадр (можно имхо даже не париться с перенесением этих битмапов в память видеокарты, 60 fps должно потянуть и так).

Проблемы скорее всего возникают потому, что когда гифок много, и они не синхронизированы (а браузер такие вещи обычно не синхронизирует), получается много-много таймеров, и итоговый фреймрейт (то есть частота, с которой нужно перерисовать весь экран) начинает сильно превышать 60 раз в секунду. Либо могут быть просто плохо настроены размеры кэшей разработчиком (никто их не настраивает под такой редкий кейс, когда на странице разом 200-300 анимаций крутится разом, настраивают под повседневное использование).

Вот если вспомнить времена IE 7-8 - там вообще тормозило всё жуть. Даже при том, что браузер пытался всё синхронизировать. В новых браузерах с этим вроде почти ок (но я не говорю про гиф-видео, когда размеры гифок по 5-7 мегабайт).

[sim3x]

Александр Попов, они у вас, уважаемый, не тормозят потому как они все в мп4
А обработка полноценного видео встроена как в проц так и в видеокарту

Проблемы в том, что гиф не видео, и обрабатывается как набор картинок

В ие6-7 тормозило если жс криво написали. Поддержка декодинга видео в цпу уже тогда была на приличном уровне

гиф в 50мб ~ 1Mb mp4 === средненький гиф

[Александр Попов]

они у вас, уважаемый, не тормозят потому как они все в мп4

Простите, кто в mp4 у меня?.. Мы про гифки изначально говорили. Они именно в GIF

Проблемы в том, что гиф не видео, и обрабатывается как набор картинок

Да, я в курсе. И всё же, если размер кадра небольшой, и сама гифка небольшая по длине, а также на странице всего 1-2 гифки, то тормозить там нечему, если код браузера адекватно написан.

В ие6-7 тормозило если жс криво написали.

Гифки там тормозили всегда. Как и JS, активно работающий с DOM (например, переставляющий на лету строки в большой таблице).

гиф в 50мб ~ 1Mb mp4 === средненький гиф

Простите, ЧТО?.. Даже 5-6 Mb - это уже ОГРОМНЫЙ гиф. Средненький - это 1-2 метра. Вы не забывайте, что в GIF обычно небольшой размер кадра и сильно порезанная палитра (обычно 256 цветов).

[sim3x]

Александр Попов,

Они именно в GIF

на большей части сервисов - нет

тормозить там нечему

я уверен, что гугл будет рад вашим практическим советам по ускорению хромиума. Мозилла также

это уже ОГРОМНЫЙ гиф

пройдитесь по сайтам с таким контентом
Средний гиф - 10-50 сек
Поскачивайте их
Посмотрите на размер

[Александр Попов]

на большей части сервисов - нет

Сорри, не знал. Я говорю про те, что в вк кидают, там в основном гифки)

я уверен, что гугл будет рад вашим практическим советам по ускорению хромиума. Мозилла также

Они же и так работают довольно быстро) Не верите - скачайте Оперу Presto или откройте IE8 или даже IE9, и сравните с Chrome даже допустим версий 38-40 (не самых новых). Неужели не ощущаете разницу? У Mozilla всё печальнее было до версии 57, тут согласен. Да и сейчас есть проблемы, но скорее с совместимостью, чем со скоростью.

Средний гиф - 10-50 сек

Да, я видел гифки и на 40-50 секунд. Но всё-таки там имхо не так много динамики, часто много планов, которые длятся относительно долго почти без изменений. В GIF же можно задавать произвольную задержку перед отображением следующего кадра (пруф). В любом случае, видео-кодек такой контент жмёт лучше (причём не портя цветность), тут спорить не с чем :)

[Drovosek01]

Александр Попов, в ВК как раз при запуске гифки воспроизводится .mp4 видео (по крайней мере в Google Chrome). Вы можете убедиться в этом сами - просто запустите гифку, а потом нажмите на нее правой кнопкой мыши.

[Александр Попов]

Drovosek01, когда GIF-ки только появились в ВК в 2013-ом, такого не было. Сейчас проверил - Вы правы, наверное недавно эту возможность добавили, как раз ради повышения производительности. Но кстати если убрать в конце ссылки параметр &mp4=1 и открыть источник в новой вкладке - то будет именно GIF.

Answer 3

[asd111]

Браузеры тоже используют OpenGL или Directx или что то еще т.е. GPU. Просто они могут работать и на CPU и на GPU.
В вашем видео маркетологу Qt надо было сказать что qt быстрее чем html 5 и он придумал такую причину.
https://youtu.be/w8lm4GV7ahg?t=4m54s
Это видео где подробно рассказывается как происходит рисовка страницы в Chrome.