Влияет ли размер пустых стилизированных блоков на производительность страницы?

Question

[Андрей Кварцов]

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

Пример кода:

<div class="diagonal"></div>
<div class="square"></div>

.diagonal {
  position: absolute;
    top: -770px;
    left: 90px;
    width: 1650px;
    height: 5000px;
    background: linear-gradient(#39a7d4, #7f40a1);
    transform: rotateZ(-30deg);
 }
 .square {
   width: 3000px;
   height: 3000px;
   border-radius: 1500px;
   position: absolute;
   top: 300;
   left: -1500px;
 }

Пободный элементов на странцие 5 штук.

Так вот, возникают вопросы:
1. Влияют ли эти блоки на производительность страницы?
2. Если сделать тоже самое, но в SVG - не будет ли это лучшим решением?
3. Где можно почитать о html-тегах и CSS-свойствах, которые могут напрямую влиять на производительность страниц?

Comments

[Ankhena]

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

[Андрей Кварцов]

Ankhena, А в чем разница между пустым блоком и таким же псевдоэлементом? CSS свойтва будут исполняться одни и теже

[Ankhena]

Андрей Кварцов, В общем случае пустые блоки это лишние DOM узлы.
Думаю, что выбор зависит от конкретной ситуации (что и как рисуем, анимируем или нет, хотим получить доступ из JS или нет, в верхней части страницы находятся блоки или нет, css внешним файлом или инлайн, рассматриваем первичную загрузку сайта или повторные и т.д.) и параметра оптимизации.

Answer 1

[Lynn «Кофеман»]

1. Да, но подозреваю, что настолько мало, что даже померять не выйдет
2. Скорее всего да, но надо проверять

Comments

[Андрей Кварцов]

Тот же SVG по весу будет больше, к тому же дополнительный запрос к серверу(вернее 5 запросов), вероятно что для CSS сделать блок шириной 5000х5000 не состовляет никаких проблем.

Точно знаю, что если применять к этим декоративным элементам свойство filter, то будут серьезные проблемы даже на мощном железе)