CSS Containment — недооценённый буст производительности 🚀

Наткнулся на отличную статью от CSS Wizardry про contain — и кажется, многие до сих пор недооценивают эту штуку.

contain позволяет изолировать часть DOM и сказать браузеру: «всё, что происходит внутри — не влияет на остальную страницу».
В результате браузер может сильно оптимизировать перерасчёты layout, paint и style.

Автор разбирает основные значения:
contain: layout — изоляция layout
contain: paint — ничего не «вылезает» за границы
contain: size — элемент не влияет на размеры родителя
contain: content — сразу всё вместе (самый частый кейс)

Особенно полезно для:

• виджетов
• сложных компонентов
• виртуализированных списков
• любых изолированных UI-блоков

💡 По сути — это способ вручную подсказать браузеру границы влияния, чтобы он не пересчитывал лишнее.

Но есть нюансы:

• можно случайно сломать layout
• size ведёт себя не всегда очевидно
• не всё можно безопасно заизолировать

В статье много примеров и объяснений, где это реально даёт профит.

Читать