Влияет ли прозрачность на производительность?

Question

[Владимир]

Например, есть такой элемент:

Задний фон у кнопки задан через rgba, синяя подложка тоже rgba и, например, что-то еще снизу через rgba. Как повлияет на производительность 200 подобных элементов на странице?

Comments

[Moskus]

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

[Владимир]

Moskus, наверняка, какой-нибудь Андройд-браузер версии 4.0.22 по-своему рендерит такие вещи. Это я к тому, что сам могу протестировать, но это может оказаться нерепрезентативно. А из жителей Тостера точно кто-то сталкивался с редким багом или видел статью по теме (да, я гуглил) и напишет здесь об этом.

[Moskus]

Владимир, а вы ориентируетесь на клиентов с таким user agent? Если ориентируетесь, у вас должна быть возможность на нем тестировать.

[Владимир]

Moskus, я просто привёл пример, речь не о конкретной версии конкретного браузера.

[Moskus]

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

Answer 1

[Eugene Chefranov]

Так симитируйте и посмотрите

https://codepen.io/chefranov/pen/ZdPoGE


https://codepen.io/chefranov/pen/rERvVV


Лучше конечно посмотреть не в песочнице codepen, а чистой странице.
Лично у меня там где много элементов с прозрачностью - сильно лагает при прокрутке

Comments

[Moskus]

Имитация, не Эмиссия.

Answer 2

[xmoonlight]

Если иконка не динамическая - используйте серверный пререндер в статику (png).