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

Самые «тяжёлые» для браузера свойства — те, что запускают пересчёт раскладки или дорогую перерисовку больших областей.

Вызывают layout (самое дорогое)

width, height, margin, padding, top, left, font-size, display, position. Изменение может пересчитать положение многих элементов, вплоть до всей страницы.

Дорогая перерисовка

• box-shadow с большим радиусом размытия;
• filter: blur() и backdrop-filter на больших областях;
• border-radius + overflow: hidden на крупных анимируемых блоках;
• сложные градиенты и большие background-image при анимации.

Неочевидные источники нагрузки

• position: fixed и background-attachment: fixed — перерисовка при прокрутке;
• огромные DOM-деревья с тяжёлыми селекторами (:has() на корне);
• чтение размеров DOM сразу после изменения стилей — принудительный layout.

Как проверить

DevTools → Performance: длинные блоки Layout и Paint; Rendering → Paint flashing подсвечивает перерисовки.

Коротко для собеседования

Тяжелее всего свойства, вызывающие layout (размеры, отступы, позиции), и дорогие эффекты перерисовки (большие тени и blur); анимировать лучше transform и opacity.

Подробнее: web.dev — Rendering performance