.feed-section { content-visibility: auto; contain-intrinsic-size: auto 500px; }Раздел может временно пропустить внутреннюю отрисовку и сохранить оценку 500px.
УРОК 99 ИЗ 100
Отложите отрисовку дальнего контента
Настройте длинный раздел так, чтобы временно пропускать нерелевантное содержимое.
ШАГ 1 · ИЗУЧИТЕ
Как это работает
content-visibility: auto позволяет браузеру пропускать содержимое, когда оно неактуально для пользователя. contain-intrinsic-size задаёт резервный размер для уменьшения сдвигов; реальный эффект нужно измерять.
.feed-section { display: none; }display: none удаляет содержимое из отрисовки и макета и не является той же оптимизацией.
ШАГ 2 · ПРИМЕНИТЕ
Ваше задание
Задайте .feed-section content-visibility: auto и contain-intrinsic-size: auto 500px.
index.htmlCSS
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ
Что должно пройти
0%не проверено
- ○Раздел использует content-visibility: auto.
- ○Резервный внутренний размер равен auto 500px.
- ○Целевой элемент присутствует на странице.
Объясните логику решения
Первое свойство управляет пропуском отрисовки, второе уменьшает нестабильность при появлении содержимого.