Сегодня предлагаю посмотреть статью, посвященную использованию CSS-свойства
content-visibility для ускорения рендеринга веб-страниц. Основные тезисы:- Что такое CSS Containment?
CSS Containment позволяет указать браузеру, какие части страницы независимы, что помогает браузеру принимать умные решения о рендеринге.
.container {
contain: style layout paint;
}- Как работает content-visibility?
Свойство content-visibility указывает браузеру пропускать рендеринг невидимого контента, тем самым экономить время обработки.
- Значения content-visibility
visible: Стандартное поведение.
hidden: Контент скрыт, но состояние рендеринга сохраняется.
auto: Контент рендерится только при необходимости.
- Когда использовать content-visibility?
Для контента ниже области просмотра.
Для самодостаточных элементов.
Для контента с высокой стоимостью рендеринга.
- Когда не использовать content-visibility?
Для видимого контента.
Для небольших элементов с минимальной стоимостью рендеринга.
Для элементов, влияющих на макет страницы.
- Использование contain-intrinsic-size
Позволяет указать плейсхолдерный размер для отложенного контента.
.content-section {
content-visibility: auto;
contain-intrinsic-size: auto 600px; /* Ширина и высота плейсхолдера */
}- Понимание свойства contain
Значение content-visibility: auto применяет style containment, layout containment и paint containment.
.container {
contain: style layout paint;
}- Поддержка браузерами
Поддерживается всеми современными браузерами, но Firefox и Safari могут иметь особенности.
Статья - https://www.debugbear.com/blog/content-visibility-api
Официальная документация MDN по content-visibility - https://developer.mozilla.org/ru/docs/Web/CSS/content-visibility
