Полезное свойство CSS Contain

Contain свойство позволяет разработчикам ограничить какой-то блок кода от остальной части документа. Наиболее полезное применение свойства, касается загрузки сторонных виджетов во время отрисоки сайта. К примеру, мы хотим что б какой-то "тяжелый" виджет не влиял на скорость отображения страницы сайта.

 

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

 

 Так-же contain обладает одним интересным параметром. К примеру, у нас на сайте есть окно авторизации, которое находится за пределами видимости. При обычной загрузке сайта, без использования свойства contain, браузер отрисовывает стриницу со всеми видимыми и невидимыми элементами. 

 Если применить свойство contain: paint браузер загрузит страницу, но при этом пропустит отрисовку блока, который находится в не видимости, тем самым ускорив процесс отрисовки страницы.

 

 Почему это не делают браузеры автоматом?

 

Возможность самому выбирать к какому блоку кода можно применять оптимизацю, даёт возможность самому выбирать различные варианты использования данного свойства, так-как не смог бы это сделать браузер "на лету".

 

P.S. На данный момент это свойство поддержвается только в последних версиях Chrome и Opera.