Melhorando o desempenho da página com `content-visibility`, suportado a partir do Chrome 85

Apenas aplicar content-visibility: auto já melhora a velocidade, pois objetos que não estão visíveis na tela deixam de ser renderizados

Ao definir auto no objeto, são aplicados layout, style e paint da especificação CSS Containment e, quando esse objeto sai da área visível, size também é aplicado

→ quando sai da área visível, os descendentes desse objeto não são desenhados de forma alguma

→ quando volta para perto da tela, size é removido e o hit-test começa novamente

Com contain-intrinsic-size, é possível definir o tamanho que deve ser desenhado por padrão. Se não for especificado, será 0

Ao definir content-visibility: hidden, nada é renderizado, como se estivesse fora da tela.

→ o objeto é ocultado e o estado de renderização é mantido, mas se houver mudanças, a renderização será aplicada quando ele voltar a ficar visível.

→ display:none - oculta o objeto e destrói o estado de renderização. Ou seja, quando voltar a ser exibido, é praticamente o mesmo que desenhá-lo novamente do zero

→ visibility:hidden - oculta o objeto e mantém o estado de renderização. Na prática, ele não é removido do documento, continua ocupando espaço e ainda pode ser clicado. Está oculto, mas a renderização continua acontecendo