Byte brevi:Fino ad ora, solo in IE / Edge potevamo sfruttare lo streaming di CSS per caricare progressivamente il CSS dei componenti mentre il loro HTML viene trasmesso in streaming. In altri browser, normalmente bloccavano il rendering fino a quando non venivano caricati tutti i sorgenti CSS, dandoci la schermata bianca di attesa prima che tutto potesse essere visualizzato. Con l'ultimo Chrome Canary, Google ha scelto l'idea di streaming CSS da IE / Edge ed è in procinto di una discussione aperta per iniziare la sua standardizzazione lavorando sulle sue specifiche.

Prima di iniziare a scrivere quello che voglio dire in questo post, ecco il succo:

I CSS ora possono essere caricati progressivamente in Chrome Canary con il flag "Funzioni della piattaforma Web sperimentale". Dettagli: https://t.co/ZhrNHZdUZW pic.twitter.com/ihVFXurQqR

- Jake Archibald (@jaffathecake) 10 febbraio 2017

…soddisfare…

In questo momento, il CSS blocca il rendering lasciando l'utente a uno schermo bianco, fino a quandoyourstyles.cssè completamente scaricato.

È prassi comune raggruppare i CSS del nostro sito solo in uno o due file. Ciò potrebbe portare all'utente a scaricare il CSS che potrebbe non essere attualmente necessario per la pagina sulla quale è atterrato. Ora, potresti chiedere, perché è persino una pratica comune farlo? Perché fornire livello componente (una pagina Web è composta da molti componenti, ad esempio intestazione, chat, barra di navigazione, piè di pagina, ecc.) CSS significa recuperare più file CSS (in HTTP / 1) che possono allungare ulteriormente quella schermata bianca di attesa .

Tuttavia, questo non è il caso nel prossimo protocollo HTTP / 2, dove molte piccole risorse possono essere fornite con un piccolo overhead e possono essere memorizzate nella cache indipendentemente.

…soddisfare…

HTTP / 2 risolve più feti rallentando un problema di download della pagina. Ma significa che devi sapere che cosa la pagina conterrà quando stai trasmettendo il contenuto delcapoetichetta. Inoltre, il browser dovrà ancora scaricare tutti i CSS prima di rendere qualsiasi oggetto per l'utente. Cioè, un caricamento lento footer ritarderà il rendering perqualunque cosa.

C'è un attacco rapido per questo. È possibile allineare il CSS critico in modo che sia possibile modellare i componenti oi contenitori principali e quindi asincrare-ordinamento-di caricare pigro il CSS in un secondo momento. Ma il problema più grande con l'integrazione dei CSS critici è che devi impostaredisplay: nessunoa molti componenti il ​​cui CSS non è stato ancora caricato. Quando viene caricata la risorsa CSS, le cose si spostano qui e là in questo modo.

IL SEGUENTE È STATO SPEDITO NEI CANARIE CROMATI VICINO A TE

Notizie migliori! blocca il rendering del contenuto successivo mentre il foglio di stile viene caricato, ma consente il rendering del contenuto prima di esso.

I fogli di stile vengono caricati in parallelo, ma si applicano in serie.

Questo fa comportarsi in modo simile a .

Diciamo che l'intestazione, l'articolo e il piè di pagina CSS sono stati caricati, ma il resto è ancora in sospeso, ecco come apparirà la pagina:

  • Intestazione: renderizzata
  • Articolo: reso
  • Chat: non renderizzata, CSS prima (l'HTML) non è stato ancora caricato (/chat.css)
  • Informazioni su di me: non renderizzato, CSS prima che non sia ancora stato caricato (/chat.css)
  • Piè di pagina: non visualizzato, CSS prima che non sia ancora stato caricato (/chat.css), anche se il suo CSS è stato caricato

Questo aiuta a rendere sequenzialmente la pagina. Non è necessario decidere quali parti della pagina, quali contenitori e layout devono essere allineati e quindi modificaredisplay: nessuno per mostrare le modifiche CSS in arrivo. È pienamente compatibile con lo streaming perché non è necessario produrre l'outputcollegamentofino a poco prima di averne bisogno. Le risorse CSS caricano progressivamente.

Ma hai visto qualcosa di strano? Hai fatto? Non hai visto I TAG LINK NEL CORPO? Non sembra strano?

Le specifiche HTML non coprono il modo in cui i CSS dovrebbero bloccare il rendering delle pagine e scoraggia nel corpo, ma tutti i browser lo consentono. Naturalmente, tutti si occupano di link-in-body a modo loro:

  • Chrome e Safari: Arresta il rendering non appena il viene scoperto e non verrà renderizzato fino a quando non verranno caricati tutti i fogli di stile scoperti. Ciò si traduce spesso in contenuti non restituiti sopra il essere bloccato
  • Firefox: nel blocco della testina di rendering fino a quando tutti i fogli di stile scoperti non sono stati caricati. nel corpo non blocca il rendering salvo che un foglio di stile in testa sta già bloccando il rendering. Ciò può comportare un lampo di contenuto inascoltato (FOUC).
  • IE / Bordo: Blocca il parser fino al caricamento del foglio di stile, ma consente il contenuto sopra il per rendere. Questo è lo schema sulle linee di cui Chrome Canary ha spedito il rendering progressivo del CSS come spiegato in questo articolo.

Lavorato Per Voi: Robert Gaines & George Fleming | Vuoi Contattarci?

Commenti Sul Sito: