Задать вопрос
JackShcherbakov
@JackShcherbakov
css

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

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

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

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

Заранее выражаю огромную благодарность всем, кто поможет
  • Вопрос задан
  • 108 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 2
@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;
}
Ответ написан
5 комментариев
5 комментариев
Odisseya
@Odisseya
Оптимизирую PageSpeed & Performance
В общем случае: используйте 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...
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Frontend React
Glob-com
от 100 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Ошибка в 1с при выгрузке товаров на сайт на Битриксе
25 апр. 2024, в 03:08
3000 руб./за проект
Создание и публикация короткого (reels) UGC-видео на YouTube-канале
25 апр. 2024, в 01:46
500 руб./за проект
Настроить перехват https-трафика для android-приложения
25 апр. 2024, в 01:02
10000 руб./за проект
Ещё заказы