Браузеры отрисовывают градиенты быстрее с помощью CSS или изображений?

Question

Я собираюсь написать довольно интенсивный графический сайт, и весь фон страницы будет содержать многостопочный линейный градиент.

Мой вопрос заключается в том, могут ли браузеры отображать его (и другие анимационные объекты поверх него) быстрее, если фон страницы использует CSS3 для создания градиента, или если это быстрее выполняется, если я создаю градиент в виде png и использую background-size: cover; для создать фон страницы.

В данном случае меня интересует не скорость загрузки страницы. Я думаю png будет быстрее, но не был уверен.

Answer 1

Это, безусловно, будет зависеть от типа градиента, размера градиента и от того, в каком браузере вы работаете. На него также могут влиять слои, расположенные поверх него и т. Д.

Если скорость абсолютно необходима, измерьте два подхода в браузерах, которые, как вы ожидаете, будет использовать большинство ваших пользователей.

Имейте в виду, что производительность может измениться в будущих выпусках.

Answer 2

Хотелось бы, чтобы у меня был менее субъективный способ измерения этого, но кажется , что использование линейных градиентов в CSS отрисовывается лучше, чем с большим изображением.