Как свойство contain влияет на производительность веб-страницы?

Свойство contain в CSS положительно влияет на производительность веб-страницы. vk.com css-tricks.com Оно позволяет указать, что элемент и его содержимое максимально независимы (изолированы) от остальной части дерева документов. vk.com

Это даёт возможность браузеру пересчитать макет, стиль, размер или любую их комбинацию для ограниченной области DOM, а не для всей страницы сайта, что повышает производительность. vk.com

Например, свойство полезно на страницах, на которых установлено большое количество сторонних виджетов, так как они могут ухудшить производительность сайта, производя ресурсозатратные операции компоновки, стиля и отрисовки. vk.com Чтобы отделить эти процессы от процессов сайта, можно установить свойство contain: strict для внешнего элемента стороннего виджета. vk.com

Также свойство contain помогает, если на сайте есть элементы, находящиеся вне экрана, но появляющиеся на нём при определённом действии (например, выезжающее меню). vk.com Если установить свойство contain: paint, браузер перестанет рендерить элемент вне экрана и отрисовывает остальное содержимое быстрее. vk.com

Однако в некоторых случаях, особенно при использовании строгого значения strict, браузер может потребовать дополнительных ресурсов для оптимизации рендеринга, поэтому важно тестировать и измерять производительность при использовании свойства. htmlacademy.ru