Свойство content-visibility, запускаемое в Chromium 85, может быть одним из самых эффективных новых свойств CSS для повышения производительности загрузки страницы.
Сontent-visibility позволяет пользовательскому агенту пропускать рендеринг элемента, включая макет и рисование, до тех пор, пока он не понадобится. Поскольку рендеринг пропускается, если большая часть вашего контента находится за пределами экрана, использование свойства content-visibility значительно ускоряет первоначальную загрузку страницы. Это также позволяет быстрее взаимодействовать с экранным контентом. Довольно прикольно.
Я думаю, что самая интересная часть этого заключается в том, что content-visibility: hidden похож на нечто среднее между display: none и visibility: hidden. Поведение больше похоже на display: none, за исключением того, что «состояние рендеринга сохраняется», что, по-видимому, делает отображение контента более эффективным.
Свойство content-visibility принимает несколько значений, но auto обеспечивает немедленное улучшение производительности. Если элемент находится за пределами экрана релевантными элементами будут те, у которых есть фокус.
.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* Explained in the next section. */
}
Что это значит?Если элемент находится за пределами экрана, то он не отображается и не загружается. Браузер определяет размер элемента, не учитывая его содержимое, и на этом останавливается. Большая часть стилей макета пропускается.
Когда элемент приближается к области просмотра, браузер начинает рисовать и проверять попадание содержимого элемента в область просмотра. Это позволяет выполнять рендеринг вовремя, чтобы пользователь мог их увидеть.
К сожалению работает только в Хроме...