Какие свойства CSS самые тяжёлые для браузера

Сложные CSS-свойства, требующие пересчёта layout или repaint, могут замедлять рендеринг:

1. box-shadow и filter (особенно blur) - вызывают repaint и требуют больших вычислений
2. border-radius в сочетании с другими эффектами
3. Анимации через transform легче, чем через width/height/top/left
4. position: fixed - вызывает постоянные перерасчёты при скролле
5. will-change - может помочь, но при неправильном использовании вредит

Пример плохой практики:

.element {
  width: 100%;
  transition: width 0.3s; /* Вызовет reflow */
}

/* Лучше так: */
.element {
  transform: scaleX(1);
  transition: transform 0.3s; /* Будет использовать композицию */
}