Для чего нужно свойство Will-Change?

CSS свойство will-change

will-change - это CSS свойство, которое указывает браузеру, что конкретный элемент будет подвергаться изменениям в ближайшем будущем. Это позволяет браузеру оптимизировать рендеринг и анимации для лучшей производительности.

Основное назначение

will-change подсказывает браузеру предварительно подготовиться к предстоящим трансформациям элемента, создавая отдельный слой для растеризации (layer) вместо перерисовки всего документа при каждом изменении.

Синтаксис

/* Значения */
will-change: auto;                    /* Значение по умолчанию */
will-change: scroll-position;         /* Будет прокручиваться */
will-change: contents;                /* Внутренний контент изменится */
will-change: transform;               /* Будут трансформации */
will-change: opacity;                 /* Изменяется прозрачность */
will-change: background-color;        /* Изменяется фон */
will-change: transform, opacity;      /* Несколько свойств */

Практические примеры

1. Оптимизация анимаций трансформаций

.animated-element {
  will-change: transform;
  transition: transform 0.3s ease;
}

.animated-element:hover {
  transform: translateY(-10px);
}

Без will-change браузер пересчитывает весь макет при каждом изменении transform. С will-change - он заранее подготавливает слой, и анимация работает плавнее.

2. Оптимизация анимации прозрачности

.fade-in {
  will-change: opacity;
  animation: fadeIn 2s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

3. Элементы с прокруткой (scroll-position)

.sidebar {
  will-change: scroll-position;
  overflow-y: scroll;
  height: 100vh;
}

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

JavaScript интеграция

Часто будет-change применяется динамически через JavaScript:

// Добавляем will-change перед анимацией
element.style.willChange = 'transform, opacity';

// Запускаем анимацию
element.classList.add('animate');

// Удаляем будет-change после завершения анимации
element.addEventListener('animationend', () => {
  element.style.willChange = 'auto';
});

Пример с React

interface AnimatedBoxProps {
  animate: boolean;
}

function AnimatedBox({ animate }: AnimatedBoxProps) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!ref.current) return;

    if (animate) {
      // Подготавливаем браузер к анимации
      ref.current.style.willChange = 'transform';
    } else {
      // После завершения убираем will-change
      ref.current.style.willChange = 'auto';
    }
  }, [animate]);

  return (
    <div
      ref={ref}
      className={animate ? 'slide-in' : ''}
      style={{
        transition: 'transform 0.3s ease'
      }}
    >
      Анимированный элемент
    </div>
  );
}

Когда использовать will-change

Используй when:

• Есть сложные анимации (особенно transform, opacity)
• Элемент прокручивается часто (бесконечный скролл, масонри-макеты)
• Высокие требования к FPS (например, игры или видео плеер)
• Есть проблемы с производительностью анимаций

// Пример: бесконечный скролл
const items = document.querySelectorAll('.scroll-item');
items.forEach(item => {
  item.style.willChange = 'transform';
});

Когда НЕ использовать will-change

Избегай when:

• Нет реальных проблем с производительностью (без данных - без оптимизации)
• Слишком много элементов с will-change (может использовать слишком много памяти)
• Статичные элементы, которые не меняются
• На мобильных устройствах без необходимости (может потребить много памяти)

/* ПЛОХО - применено везде без необходимости */
.container * {
  will-change: transform;
}

/* ХОРОШО - только для элементов, которые действительно анимируются */
.animated-item {
  will-change: transform;
}

Производительность

Механизм работы:

1. Браузер создаёт отдельный слой (layer) для элемента
2. Содержимое слоя растеризуется отдельно
3. При изменении свойства обновляется только этот слой
4. Остальной документ не затрагивается

Затраты памяти:

• Каждый слой требует дополнительную память на GPU
• Слишком много слоёв могут замедлить производительность
• На мобильных устройствах эффект более заметен

Инструменты для анализа

DevTools Performance:

// В Chrome DevTools Performance вкладке
// 1. Открой Performance tab
// 2. Запиши анимацию
// 3. Смотри "Composite Layers" на временной шкале
// 4. Ищи жёлтые или красные полоски (это плохая производительность)

Примечания совместимости

• Chrome: Полная поддержка
• Firefox: Полная поддержка
• Safari: Полная поддержка
• Edge: Полная поддержка
• IE 11: НЕ поддерживается

Типичная ошибка

/* ПЛОХО - забыли удалить will-change */
.element {
  will-change: transform;
  /* ... и никогда его не удалили ... */
}

/* ХОРОШО - удалили after анимации */
element.addEventListener('animationend', () => {
  element.style.willChange = 'auto';
});