A visibilidade do conteúdo da nova propriedade CSS acelera a renderização da página várias vezes

Em 5 de agosto de 2020, os desenvolvedores do Google anunciaram uma nova propriedade CSS content-visibilityno 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-visibilityforç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-visibilitybaseado em primitivas da especificação CSS Containment . Embora atualmente seja content-visibilitycompatí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 containe pode ser combinado com outros:



  • size: , . , , .
  • layout: . , , , .
  • style: , , , (, ). , , , — .
  • paint: . , , . , .


content-visibility



Pode ser confuso quais valores são containmelhores 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-visibilitypara configuração automática contain. content-visibility: autogarante 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: autoem 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-visibilityo 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-sizque 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: hiddenfaz o que content-visibility: autofaz 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: hiddenpor 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-visibilitye 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;)






All Articles