content-visibility
no Chromium 85. Isso deve afetar significativamente a velocidade do primeiro carregamento e primeira renderização no site; além disso, você pode interagir com o conteúdo recém-renderizado imediatamente, sem esperar que o restante do conteúdo seja carregado. content-visibility
força o agente do usuário a pular a marcação e a pintura de elementos que não estão na tela. Na verdade, funciona como um carregamento lento, não apenas no carregamento de recursos, mas em sua renderização.

Nesta demonstração
content-visibility: auto
, quando aplicada a dividir o conteúdo, oferece uma velocidade de renderização 7x mais rápida
Apoio, suporte
content-visibility
baseado em primitivas da especificação CSS Containment . Embora atualmente seja content-visibility
compatível apenas com o Chromium 85 (e considerado "prototipável" no Firefox), a especificação de contenção é compatível com a maioria dos navegadores modernos.
Princípio da Operação
O principal objetivo do CSS Containment é melhorar o desempenho de renderização do conteúdo da web, fornecendo isolamento previsível da subárvore DOM do resto da página.
Basicamente, o desenvolvedor pode dizer ao navegador quais partes da página são encapsuladas como uma coleção de conteúdo, permitindo que os navegadores manipulem o conteúdo sem ter que considerar o estado fora da subárvore. O navegador pode otimizar a renderização da página sabendo quais subárvores contêm o conteúdo isolado.
Existem quatro tipos de contenção CSS, cada um servindo como um valor para uma propriedade CSS
contain
e pode ser combinado com outros:
size
: , . , , .layout
: . , , , .style
: , , , (, ). , , , — .paint
: . , , . , .
content-visibility
Pode ser confuso quais valores são
contain
melhores para usar, uma vez que as otimizações do navegador só podem funcionar com o conjunto correto de parâmetros. Vale a pena brincar com os valores para descobrir empiricamente o que funciona melhor. Um melhor uso content-visibility
para configuração automática contain
. content-visibility: auto
garante o aumento máximo possível na produtividade com o mínimo de esforço.
No modo automático, a propriedade obtém os atributos de layout, estilo e pintura, e quando o elemento sai das bordas da tela, ele ganha tamanho e para de pintar e verificar o conteúdo. Isso significa que, assim que um elemento deixa a área de renderização, seus descendentes param de renderizar. O navegador reconhece o tamanho do elemento, mas não faz mais nada até que a renderização seja necessária.
Exemplo - blog de viagens
Normalmente, um blog de viagens contém várias histórias com imagens e descrições. Aqui está o que acontece em um navegador típico quando acessa um blog de viagens:
- Parte da página é carregada da rede junto com os recursos necessários
- O navegador estiliza e coloca todo o conteúdo na página sem distinguir entre o conteúdo visível e invisível
- O navegador vai para a etapa 1 até que todos os recursos sejam carregados
Na etapa 2, o navegador processa o conteúdo, tentando localizar alterações. Ele atualiza os estilos e o layout de qualquer novo elemento, junto com os elementos que podem ter mudado como resultado das atualizações. Isso é renderização. Leva tempo.

Agora vamos imaginar o que colocamos
content-visibility: auto
em cada postagem do blog. O sistema básico é o mesmo: o navegador baixa e renderiza partes da página. No entanto, a diferença na quantidade de trabalho realizado na etapa 2.Ccontent-visibility
o navegador estilizará e posicionará o conteúdo que o usuário está vendo no momento (na tela). Mas ao lidar com histórias fora da tela, o navegador irá pular a renderização de todo o elemento e hospedar apenas o contêiner. O desempenho de carregamento desta página será como se ela tivesse preenchido mensagens na tela e recipientes vazios para cada postagem fora dela. Acontece muito mais rápido, ganhando até 50% no tempo de carregamento. Em nosso exemplo, vemos uma melhoria de renderização de 232 ms para 30 ms, que é uma melhoria de 7x no desempenho.
O que você precisa fazer para aproveitar esses benefícios? Primeiro, dividimos o conteúdo em partes:

depois, aplicamos o estilo subsequente às partes:
.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* */
}
, , . , , , .
contain-intrinsic-size
Para compreender os benefícios potenciais
content-visibility
, o navegador deve impor restrições de dimensionamento para garantir que a renderização do conteúdo não afete as dimensões dos elementos. Isso significa que o item será colocado como se estivesse vazio. Se o elemento não tiver altura definida, será igual a zero.
Felizmente, o css tem outra capacidade,
contain-intrinsic-siz
que permite determinar o tamanho real de um elemento se ele tiver sido compactado. Em nosso exemplo, definimos a largura e a altura para aproximadamente 1000 px.
Isso significa que ele será posicionado como se houvesse um único arquivo de "tamanho interno", garantindo que o div ainda ocupe espaço.
contain-intrinsic-siz .
Ocultar conteúdo de content-visibility: hidden
content-visibility: hidden
faz o que content-visibility: auto
faz com o conteúdo fora da tela. No entanto, ao contrário do automático, ele não começa a renderizar conteúdo automaticamente na tela.
Compare isso com as maneiras usuais de ocultar o conteúdo do elemento:
- display: none: Oculta o elemento e remove o estado de renderização. Isso significa que recuperar um item custará a mesma carga que criar um novo item.
- visibilidade: oculto: oculta o elemento e sai do estado de renderização. Na verdade, isso não remove o elemento do documento, pois ele (e sua subárvore) ainda ocupa espaço geométrico na página e ainda pode ser clicado. Ele também atualiza o estado de renderização sempre que necessário, mesmo se estiver oculto.
content-visibility: hidden
por outro lado, oculta o elemento enquanto mantém o estado de renderização para que, se houver necessidade de alterações, elas só ocorrerão quando o elemento for mostrado na tela.
Conclusão
content-visibility
e as CSS Containment Spec permitem que você acelere significativamente a renderização e o carregamento de páginas sem nenhuma manipulação complexa, em CSS simples.
The CSS Containment Spec
MDN Docs sobre CSS Containment
CSSWG Drafts
As seguintes informações foram usadas na preparação do material - web.dev/content-visibility
Publicidade
Servidores para hospedagem de sites - trata-se do nosso épico ! Todos os servidores "prontos para uso" são protegidos contra ataques DDoS, instalação automática de um painel de controle VestaCP conveniente. Melhor tentar uma vez;)
