Pubblicato il 31 marzo 2014
Per impostazione predefinita, il CSS viene trattato come una risorsa che blocca il rendering, il che significa che il browser non eseguirà il rendering di alcun contenuto elaborato finché non viene costruito il CSSOM. Assicurati di mantenere il CSS snello, di pubblicarlo il più rapidamente possibile e di utilizzare tipi e query supporti per sbloccare il rendering.
Nella costruzione dell'albero di rendering abbiamo visto che il percorso di rendering critico richiede sia il DOM sia il CSSOM per costruire l'albero di rendering. Ciò crea un'importante implicazione per il rendimento: sia l'HTML sia il CSS sono risorse che bloccano il rendering. L'HTML è ovvio, perché senza il DOM non avremmo nulla da eseguire il rendering, ma il requisito CSS potrebbe essere meno ovvio. Cosa succederebbe se provassimo a eseguire il rendering di una pagina tipica senza bloccare il rendering sul CSS?
Riepilogo
- Per impostazione predefinita, il CSS viene trattato come una risorsa che blocca il rendering.
- I tipi e le query supporti ci consentono di contrassegnare alcune risorse CSS come non bloccanti per il rendering.
- Il browser scarica tutte le risorse CSS, indipendentemente dal comportamento di blocco o non blocco.
L'esempio precedente, che mostra il sito web del New York Times con e senza CSS, dimostra perché il rendering viene bloccato finché il CSS non è disponibile: senza CSS la pagina è relativamente inutilizzabile. L'esperienza a destra viene spesso definita Flash of Unstyled Content (FOUC). Il browser blocca il rendering finché non ha sia il DOM sia il CSSOM.
Il CSS è una risorsa che blocca il rendering. Forniscila al client il prima possibile per ottimizzare il tempo di rendering iniziale.
Tuttavia, cosa succede se abbiamo alcuni stili CSS utilizzati solo in determinate condizioni, ad esempio quando la pagina viene stampata o proiettata su un monitor di grandi dimensioni? Sarebbe utile non dover bloccare il rendering di queste risorse.
I "tipi di media" e le "query supporti" CSS ci consentono di risolvere questi casi d'uso:
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />
Una query supporti è costituita da un tipo di media e da zero o più espressioni che verificano le condizioni di determinate funzionalità dei media. Ad esempio, la nostra prima dichiarazione del foglio di stile non fornisce un tipo o una query supporti, quindi si applica in tutti i casi, ovvero blocca sempre il rendering. D'altra parte, la seconda dichiarazione del foglio di stile si applica solo quando i contenuti vengono stampati. Forse vuoi riorganizzare il layout, modificare i caratteri e altre considerazioni di progettazione importanti per la stampa. Di conseguenza, questa dichiarazione del foglio di stile non deve bloccare il rendering della pagina al primo caricamento. Infine, l'ultima dichiarazione del foglio di stile fornisce una "query supporti", che viene eseguita dal browser: se le condizioni corrispondono, il browser blocca il rendering finché il foglio di stile non viene scaricato ed elaborato.
Utilizzando le query supporti, possiamo personalizzare la presentazione per casi d'uso specifici, ad esempio la visualizzazione rispetto alla stampa, e anche per condizioni dinamiche come modifiche dell'orientamento dello schermo, eventi di ridimensionamento e altro ancora. Quando dichiari le risorse del foglio di stile, presta molta attenzione al tipo e alle query supporti; influiscono notevolmente sul rendimento del percorso di rendering critico.
Considera questi esempi:
<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
- La prima dichiarazione blocca il rendering e corrisponde a tutte le condizioni.
- Anche la seconda dichiarazione blocca il rendering:
"all"è il tipo predefinito, quindi se non ne specifichi uno, viene impostato implicitamente su"all". Di conseguenza, la prima e la seconda dichiarazione sono in realtà equivalenti. - La terza dichiarazione ha una query supporti dinamica, che viene valutata al caricamento della pagina. A seconda dell'orientamento del dispositivo durante il caricamento della pagina,
portrait.csspotrebbe bloccare o meno il rendering. - L'ultima dichiarazione viene applicata solo quando la pagina viene stampata (
"print"), quindi non blocca il rendering al primo caricamento della pagina nel browser.
Infine, tieni presente che "blocco del rendering" si riferisce solo al fatto che il browser debba o meno sospendere il rendering iniziale della pagina su quella risorsa. In entrambi i casi, il browser scarica comunque la risorsa CSS, anche se con una priorità inferiore per le risorse non bloccanti.