content-visibility: la nuova proprietà CSS che migliora le prestazioni del rendering

Migliora il tempo di caricamento iniziale saltando il rendering dei contenuti fuori schermo.

Una Kravets

Jeremy Wagner

Vladimir Levin

La proprietà content-visibility , lanciata in Chromium 85, potrebbe essere una delle nuove proprietà CSS più efficaci per migliorare le prestazioni di caricamento della 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.

Supporto browser

content-visibility si basa su primitive all'interno della specifica di contenimento CSS. Anche se content-visibility è supportato solo in Chromium 85 per il momento (e considerato "idoneo per la prototipazione" per Firefox), la specifica di contenimento è supportata nella maggior parte dei browser moderni.

Contenimento CSS

L'obiettivo principale e generale del contenimento CSS è consentire il miglioramento del rendimento del rendering dei contenuti web garantendo l'isolamento prevedibile di 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 ci serve solo la dimensione dell'elemento.
• 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. Nessun elemento può fuoriuscire dall'elemento, e se un elemento è fuori dallo schermo o non è visibile, anche i suoi 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 del browser 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à visibilità-contenuti accetta diversi valori, ma auto è quella che offre miglioramenti immediati del rendimento. 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

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:

1. Viene scaricata una parte della pagina dalla rete, insieme a eventuali Google Cloud.
2. Il browser applica lo stile e il layout di tutti i contenuti della pagina, senza valutando se i contenuti sono visibili all'utente.
3. 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.

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. Ciò corrisponde a un aumento delle prestazioni di 7 volte.

Cosa devi fare per usufruire di questi vantaggi? Innanzitutto, suddividi i contenuti in sezioni:

Poi applichiamo la seguente regola di stile alle sezioni:

.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 realizzare i potenziali vantaggi di content-visibility, il browser deve applicare il contenimento delle dimensioni per garantire che i risultati di rendering dei contenuti non influiscano 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 singolo elemento secondario delle dimensioni "intrinsic-size", garantendo che i div senza dimensioni 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, se scorri un elemento con content-visibility: auto applicato e poi scorri di nuovo fuori dallo schermo, l'elemento manterrà automaticamente la larghezza e l'altezza ideali e non tornerà 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. Inoltre, aggiorna lo stato di rendering ogni volta che è necessario, anche quando è nascosto.

content-visibility: hidden, invece, nasconde l'elemento mantenendone lo stato di rendering, pertanto, se devono essere apportate modifiche, queste vengono applicate solo quando l'elemento viene mostrato di nuovo (ovvero quando la proprietà content-visibility: hidden viene 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 in 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 posticipare il layout e il rendering degli elementi offscreen, offri al thread principale la possibilità di rispondere a un'attività critica visibile 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:

• Specifiche di contenimento CSS
• Documentazione MDN su CSS Contenimento
• Bozze CSSWG