content-visibility: пропуск отрисовки далёких секций
Content-visibility позволяет браузеру откладывать часть работы для содержимого, которое пока не нужно рисовать. Значение auto предназначено для оптимизации длинной страницы с сохранением обычного доступа к содержимому.
Назначение
Content-visibility позволяет браузеру откладывать часть работы для содержимого, которое пока не нужно рисовать. Значение auto предназначено для оптимизации длинной страницы с сохранением обычного доступа к содержимому.
Как это работает
Contain-intrinsic-size задаёт ориентир размера на время пропуска. Это помогает избежать резких изменений прокрутки. В учебном примере реальный эффект нужно изучать на странице с множеством секций, а не только на одном коротком блоке.
Пример
<style>.long-lesson{content-visibility:auto;contain-intrinsic-size:auto 14rem;border:1px solid #9bb9a6;padding:1rem}</style>
<section class="long-lesson"><h3>Дополнительное объяснение</h3><p>Содержимое секции остаётся частью документа.</p></section>Что должно получиться
Браузер может пропустить работу над удалённым содержимым, используя приблизительный размер. Когда секция становится значимой для пользователя, её содержимое обрабатывается и показывается.
Граница применения и частая ошибка
Не используйте hidden как замену корректному скрытию интерактивного состояния без проверки доступности. Auto не означает удаление DOM и не гарантирует сокращение сетевых загрузок. Постоянные измерения скрытого содержимого скриптом могут уменьшить пользу оптимизации.
Самостоятельная проверка
На длинной локальной странице сравните время отрисовки и поведение поиска по тексту. Подберите приблизительный размер по реальным секциям. Проверьте переход по фрагменту URL и отсутствие заметных скачков прокрутки.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.