Интересно, что при начальном рендеринге страницы браузер вынужден посчитать и построить весь ее layout целиком.
Даже если страница скроллится 10 минут вниз, размер и расположение элементов в самом-самом низу уже посчитано, едва она была открыта
Потому что в css есть такие клевые свойства как position: absolute или fixed.
Можно выдернуть какой-нибудь див-потомок самого нижнего элемента, до которого еще полдня скроллить, и поднять его в начальный вьюпорт
Если у элементов, находящихся за пределами начальной видимой части страницы, дети не выпрыгивают куда не стоит, для них нужно прописать
content-visibility: auto
web.dev/content-visibi…
Это флаг для браузера, что вычисление размера и расположения детей внутри элемента можно отложить, пока он не приблизился к вьюпорту
К content-visibility: auto; нужно добавлять
contain-intrinsic-size: element-size;
Иначе из-за отложенного вычисления размеров можно столкнуться с прыжками и рывками контента при скроллинге вниз
Для «длинных» сайтов со множеством вложенных элементов это мегафича! Перфоманс можно ускорить в разы.
Особенно на мобилках со слабым CPU, на котором считается лейаут
Использовать можно уже сейчас🙂
Заработает только в Chrome😔
Но никак не помешает остальным🙂