Background-size отрицательно влияет на производительность. Как исправить?

Question

[JackShcherbakov]

Здравствуйте, коллеги! Недавно столкнулся со следующей проблемой:

Я был мягко говоря ошарашен, когда выяснилось, что все тормаза анимаций сss появляются в результате использования background-size. В моем конструкторе сайтов есть возможность настроить размер фона, то есть эта настройка непосредственно изменяет background-size элемента. Но после добавления этого самого css-свойство (посредством определённого интерфейса) у пользователей начинает жутко лагать все эффекты при наведении а анимации. Как только свойство убирается, все возвращается в норму. Я добавил предупреждение, мол, настройка может негативно повлиять на производительность редактора, но все же меня это не устраивает. Но все же, в веб-приложении есть один элемент, который ну просто невозможно без костылей сделать иным образом - без использования background-size, что опять же заставляет лагать анимацию. При наведении на div (c background-size и самой картинкой на фоне) у него должно плавно изменяться transform: scale и rotate, но фиг там.

Вообщем, как исправить? Почему такое происходит?

Заранее выражаю огромную благодарность всем, кто поможет

Answer 1

[GreatRash]

/* ПЛОХО */
.my-div {
  background-size: cover;
}

/* ЛУЧШЕ */
.my-div::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-size: cover;
  will-change: transform;
  z-index: -1;
}

Comments

[JackShcherbakov]

Спасибо Вам за ответ. Но проблема в том, что все элементы с background-size генерируются динамически при помощи PHP и JS. Так что использовать псевдоэлементы не получится.

[GreatRash]

JackShcherbakov, с таким же успехом можно вместо псевдоэлемента использовать настоящий элемент.

[JackShcherbakov]

GreatRash, Ну и что это нам даст? У нас просто будет два блока, один из которых будет давать вышеописанную проблему.

[GreatRash]

JackShcherbakov, вам это даст то, что репейнт будет вызываться только на элементе с анимациями, не затрагивая бекграунд.

[JackShcherbakov]

GreatRash, Эта проблема появляется внезависимости от того, на каком элементе происходит репейнт и на каком элементе стоит background-size. Даже если 2 разных блока и у одного есть bg-size - то все равно будет лагать.

Answer 2

[Odisseya]

В общем случае: используйте css-классы для переключения внешнего вида элемента не меняя стили в js-коде (плохо: x.css('color', 'red'), лучше: el.className += " red"). Используйте display: none (1 reflow, repaint), внесите 100 изменений в стили, восстановите display (1 reflow, repaint).

Учитывайте затратность компоновки — элемент с переменным background-size должен иметь минимальную вложенность, т.к. нужно пересчитывать визуализацию всех соседей и всех родительских эл-в. Лучше вынести элемент с переменным background-size из стандартного потока компоновки блочной модели — position: absolute/static.

Копайте в сторону оптимизации reflow & repaint — смотрите профайлером что и когда подтормаживает, учет потребляемых ресурсов. Управляйте слоями: https://developers.google.com/web/fundamentals/per...