Migliora il tempo di caricamento iniziale saltando il rendering dei contenuti fuori schermo.
La
content-visibility
lanciato in Chromium 85, potrebbe essere uno dei nuovi CSS di maggiore impatto
proprietà per migliorare il rendimento
del caricamento pagina. content-visibility
attiva
user agent di saltare il lavoro di rendering di un elemento, tra cui layout e disegno,
fino a quando non è necessario. Poiché il rendering viene ignorato, se gran parte dei tuoi
i contenuti sono fuori schermo, l'utilizzo della proprietà content-visibility
rende
caricamento iniziale dell'utente molto più velocemente. Inoltre, consente interazioni più rapide
contenuti a schermo. Piuttosto comodo.
![demo con figure che rappresentano i risultati di rete](https://web.dev/static/articles/content-visibility/image/demo-figures.jpg?hl=it)
content-visibility: auto
ad aree di contenuti suddivisi in blocchi consente un aumento delle prestazioni del rendering di 7 volte al caricamento iniziale. Continua a leggere per saperne di più.Supporto browser
content-visibility
si basa sulle primitive all'interno del contenimento CSS
Specifiche. Mentre content-visibility
è solo
supportato in Chromium 85 per il momento (e ritenuto "valido
prototipazione" per
Firefox), la Specifica di contenimento è supportata nella più moderna
dal browser.
Contenimento CSS
La chiave e l'obiettivo generale del contenimento CSS è consentire il rendering delle prestazioni dei contenuti web grazie all'isolamento prevedibile dei un sottoalbero DOM dal resto della pagina.
Praticamente uno sviluppatore può indicare a un browser quali parti della pagina sono incapsulate come insieme di contenuti, consentendo ai browser di ragionare sui contenuti senza dobbiamo considerare lo stato al di fuori del sottoalbero. Sapere quali frammenti di contenuti (sottoalberi) hanno contenuti isolati significano che il browser può effettuare l'ottimizzazione per il rendering della pagina.
Esistono quattro tipi di CSS
contenimento,
ciascuno un valore potenziale per la proprietà CSS contain
, che può essere combinato
in un elenco di valori separati da spazi:
size
: il contenimento delle dimensioni su un elemento garantisce che il rettangolo dell'elemento possa essere senza la necessità di esaminare i discendenti. Ciò significa che possiamo potenzialmente saltare il layout dei discendenti se tutto ciò di cui abbiamo bisogno è la dimensione .layout
: il contenimento del layout significa che i discendenti non influiscono sul valore layout esterno di altri riquadri nella pagina. Questo ci consente di saltare dei discendenti se tutto ciò che vogliamo fare è disporre altre caselle.style
: il contenimento dello stile garantisce che le proprietà che possono avere effetti su oltre ai suoi discendenti non sfugge all'elemento (ad es. i contatori). Questo ci consente potenzialmente di saltare il calcolo dello stile per i discendenti se tutti che si desidera calcolare gli stili su altri elementi.paint
: il contenimento della vernice garantisce che i discendenti della scatola di contenimento non vengono visualizzati al di fuori dei suoi limiti. Nessuno può sovraccaricare l'elemento Se un elemento è fuori schermo o comunque non visibile, i relativi discendenti non saranno visibili. In questo modo, possiamo potenzialmente saltare la procedura discendenti se l'elemento è fuori schermo.
Omissione lavoro di rendering con content-visibility
Può essere difficile capire quali valori di contenimento utilizzare, poiché
le ottimizzazioni possono essere attivate solo quando viene specificato un insieme appropriato. Puoi
prova i valori per vedere cosa funziona
migliori o
puoi utilizzare un'altra proprietà CSS denominata content-visibility
per applicare
il contenimento automatico. content-visibility
ti garantisce di ottenere
di prestazioni che il browser può offrirti con il minimo sforzo in quanto
sviluppatore.
La proprietà di visibilità dei contenuti accetta diversi valori, ma auto
è quello
che offre miglioramenti immediati delle prestazioni. Un elemento con
content-visibility: auto
ottiene layout
, style
e paint
di contenimento. Se
L'elemento è fuori schermo e non è comunque pertinente per l'utente,
sono quelli che hanno il focus o una selezione nel sottoalbero),
ottiene anche size
di contenimento (e si ferma
quadro
e
hit test
i suoi contenuti).
Che cosa significa? In breve, se l'elemento è fuori schermo, i suoi discendenti vengono non viene eseguito il rendering. Il browser determina le dimensioni dell'elemento senza considerare dei suoi contenuti e si ferma qui. La maggior parte del rendering, ad esempio lo stile e il layout del sottoalbero dell'elemento vengono ignorati.
Quando l'elemento si avvicina all'area visibile, il browser non aggiunge più size
il contenimento e inizia a dipingere e a eseguire test di hit sui contenuti dell'elemento. Questo
consente di eseguire il rendering in tempo per essere visto dall'utente.
Una nota sull'accessibilità
Una delle caratteristiche di content-visibility: auto
è che i contenuti fuori schermo rimangono disponibili nel modello a oggetti del documento e, di conseguenza, nell'albero dell'accessibilità (a differenza di visibility: hidden
). Ciò significa che è possibile cercare contenuti sulla pagina e raggiungerli senza attendere che vengano caricati o sacrificare le prestazioni del rendering.
Il rovescio della medaglia, tuttavia, è che gli elementi punti di riferimento con funzionalità di stile come display: none
o visibility: hidden
appariranno anche nell'albero dell'accessibilità quando fuori dallo schermo, poiché il browser non eseguirà il rendering di questi stili finché non entreranno nell'area visibile. Per evitare che siano visibili nell'albero dell'accessibilità, creando potenzialmente disordine, assicurati di aggiungere anche aria-hidden="true"
.
Esempio: un blog di viaggi
content-visibility: auto
alle aree suddivise a sinistra. I risultati mostrano tempi di rendering compresi tra 232 ms e 30 ms al caricamento iniziale della pagina.In genere un blog di viaggi contiene una serie di storie con alcune immagini e un testo descrittivo. Ecco cosa succede in un browser tipico quando naviga verso un blog di viaggi:
- Viene scaricata una parte della pagina dalla rete, insieme a eventuali Google Cloud.
- Il browser applica lo stile e il layout di tutti i contenuti della pagina, senza valutando se i contenuti sono visibili all'utente.
- Il browser torna al passaggio 1 finché tutte le risorse e la pagina non vengono scaricato.
Nel passaggio 2, il browser elabora tutti i contenuti alla ricerca di elementi che potrebbero sono cambiate. Aggiorna lo stile e il layout di tutti i nuovi elementi, insieme a gli elementi che potrebbero essere cambiati in seguito ai nuovi aggiornamenti. Questo è il rendering al lavoro. Questa operazione richiede tempo.
![Uno screenshot di un blog di viaggi.](https://web.dev/static/articles/content-visibility/image/a-screenshot-a-travel-bl-d12bedce7d152.jpg?hl=it)
Pensa ora a cosa succede se metti content-visibility: auto
su ciascuno dei
singole storie sul blog. Il loop generale è lo stesso: il browser
scarica ed esegue il rendering di blocchi della pagina. Tuttavia, la differenza sta nel
del lavoro svolto nel passaggio 2.
Con la visibilità dei contenuti, definisce lo stile e il layout di tutti i contenuti attualmente visibili all'utente (sono visibili sullo schermo). Tuttavia, quando elabori completamente fuori schermo, il browser ignorerà il lavoro di rendering solo lo stile e il layout della casella dell'elemento.
Il caricamento di questa pagina sarebbe come se la pagina venisse visualizzata a schermo intero e caselle vuote per ogni notizia fuori schermo. Questo ha un rendimento elevato migliore, con una riduzione prevista del 50% o più dal costo di rendering Caricamento in corso. Nel nostro esempio, vediamo un aumento passando da un tempo di rendering di 232 ms a una Tempo di rendering: 30 ms. Si tratta di un aumento delle prestazioni di 7 volte.
Cosa devi fare per usufruire di questi vantaggi? Innanzitutto, suddividi i contenuti in sezioni:
![Uno screenshot con annotazioni del chunking dei contenuti in sezioni con una classe CSS.](https://web.dev/static/articles/content-visibility/image/an-annotated-screenshot-9dac5c2e32b01.jpg?hl=it)
story
, per ricevere content-visibility: auto
. Vedi Demo su CodepenQuindi, applichiamo alle sezioni la seguente regola di stile:
.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* Explained in the next section. */
}
Specifica delle dimensioni naturali di un elemento con contain-intrinsic-size
Per comprendere i potenziali vantaggi di content-visibility
, il browser
deve applicare il contenimento delle dimensioni
per garantire che i risultati del rendering dei contenuti
non influiscono in alcun modo sulle dimensioni dell'elemento. Ciò significa che l'elemento
viene visualizzato come se fosse vuoto. Se per l'elemento non è specificata un'altezza
in un layout a blocchi normale, avrà un'altezza pari a 0.
Questo potrebbe non essere l'ideale, dato che la dimensione della barra di scorrimento si sposta dipendere da ogni storia con un'altezza diversa da zero.
Per fortuna, il CSS fornisce un'altra proprietà, contain-intrinsic-size
, che
specifichi effettivamente le dimensioni naturali dell'elemento se quest'ultimo
interessate dal contenimento delle dimensioni. Nel nostro esempio, lo impostiamo su 1000px
come
una stima dell'altezza e della larghezza delle sezioni.
Ciò significa che verrà visualizzato come se avesse un solo elemento figlio di "dimensioni intrinseche"
dimensioni, assicurandoti che i div non dimensionati occupino comunque spazio.
contain-intrinsic-size
funge da dimensione segnaposto al posto dei contenuti visualizzati.
In Chromium 98 e versioni successive, è disponibile una nuova versione di auto
parola chiave per contain-intrinsic-size
. Se specificato, il browser memorizza
l'ultima dimensione di cui è stato eseguito il rendering, se presente, e utilizzala al posto del segnaposto fornito dallo sviluppatore
dimensioni. Ad esempio, se hai specificato contain-intrinsic-size: auto 300px
, il parametro
inizierà con una dimensione intrinseca 300px
per ogni dimensione, ma una
i contenuti dell'elemento vengono sottoposti a rendering, manterranno le dimensioni intrinseche del rendering.
Verranno memorizzate anche eventuali modifiche successive alle dimensioni del rendering. In pratica, ciò significa che se
scorri un elemento con content-visibility: auto
applicato e poi scorri indietro
fuori schermo, manterrà automaticamente la larghezza e l'altezza ideali e non verrà ripristinato
alle dimensioni del segnaposto. Questa funzionalità è particolarmente utile
per gli utenti che scorrono all'infinito,
il che ora può migliorare automaticamente la stima delle dimensioni nel tempo, in quanto l'utente
esplora la pagina.
I contenuti vengono nascosti con content-visibility: hidden
E se volessi mantenere i contenuti senza rendering indipendentemente dal fatto che li
viene visualizzato sullo schermo, sfruttando al contempo i vantaggi dello stato di rendering memorizzato nella cache? Inserisci:
content-visibility: hidden
.
La proprietà content-visibility: hidden
offre gli stessi vantaggi della
contenuti non sottoposti a rendering e stato di rendering memorizzato nella cache come content-visibility: auto
fuori dallo schermo. Tuttavia, a differenza di auto
, la funzionalità non inizia automaticamente a
il rendering sullo schermo.
Ciò ti offre un maggiore controllo, consentendoti di nascondere i contenuti di un elemento in seguito per mostrarli rapidamente.
Confrontalo con altri modi comuni per nascondere i contenuti dell'elemento:
display: none
: nasconde l'elemento e ne distrugge lo stato di rendering. Questo mostrare l'elemento è costoso quanto visualizzare un nuovo elemento con gli stessi contenuti.visibility: hidden
: nasconde l'elemento e conserva lo stato di rendering. Questo non rimuove effettivamente l'elemento dal documento, in quanto è un sottoalbero occupa ancora uno spazio geometrico sulla pagina e può comunque essere selezionato. it aggiorna lo stato del rendering ogni volta che è necessario, anche quando è nascosto.
content-visibility: hidden
, invece, nasconde l'elemento mentre
di conservare lo stato di rendering, quindi, in caso di modifiche
si verificano solo quando l'elemento viene mostrato di nuovo (ad es.
content-visibility: hidden
proprietà è stata rimossa).
Alcuni ottimi casi d'uso di content-visibility: hidden
sono l'implementazione
scorrimento virtuali avanzati e layout di misurazione. Sono ideali anche per
le applicazioni a pagina singola (APS). Le visualizzazioni di app non attive possono essere lasciate nel DOM con
content-visibility: hidden
applicata per impedire la visualizzazione, ma mantenere la sua
stato memorizzato nella cache. In questo modo il rendering della visualizzazione diventa più veloce quando torna attiva.
Effetti sull’interazione con Next Paint (INP)
INP è una metrica che valuta la capacità di una pagina di rispondere in modo affidabile all'input degli utenti. La reattività può essere influenzata da una quantità eccessiva di lavoro sul thread principale, incluso il lavoro di rendering.
Ogni volta che puoi ridurre il lavoro di rendering su una determinata pagina, offri al thread principale l'opportunità di rispondere più rapidamente agli input degli utenti. Ciò include il lavoro di rendering e l'utilizzo della proprietà CSS content-visiblity
ove appropriato può ridurre il lavoro di rendering, soprattutto durante l'avvio, quando viene eseguita la maggior parte delle operazioni di rendering e layout.
La riduzione del lavoro di rendering ha un effetto diretto su INP. Quando gli utenti tentano di interagire con una pagina che utilizza correttamente la proprietà content-visibility
per rinviare il layout e il rendering degli elementi fuori schermo, offri al thread principale la possibilità di rispondere a lavori critici visibili all'utente. Questo può migliorare l'INP della pagina in alcune situazioni.
Conclusione
content-visibility
e la Specifica di contenimento CSS garantiscono prestazioni eccezionali
i booster sono disponibili direttamente nel tuo file CSS. Per ulteriori informazioni su questi
proprietà, consulta: