In che modo i browser leggono e interpretano i CSS?

Domanda in due parti:

  1. I browser hanno un interprete CSS incorporato come fanno per JavaScript?
  2. Quando esattamente un browser legge il CSS e quando applica il CSS?

In particolare, vorrei chiarimenti su come o perché JavaScript e CSS sono diversi in quanto con JavaScript è necessario attendere in particolare fino a window.onload in modo che l’interprete possa correttamente getElementById. Tuttavia, nel CSS è ansible selezionare e applicare stili alle classi e id tutti nily scaltro.

(Se è importante, supponiamo che mi riferisca a una pagina HTML di base con un foglio di stile esterno nella testa)

Se hai lavorato con una connessione lenta in qualsiasi momento di recente, scoprirai che i CSS verranno applicati agli elementi man mano che appaiono (lentamente), in realtà facendo scorrere il contenuto della pagina man mano che la struttura DOM viene caricata. Poiché il CSS non è un linguaggio di programmazione, non si basa su oggetti disponibili in un dato momento per essere analizzato correttamente (JavaScript), e il browser è in grado di rivalutare semplicemente la struttura della pagina mentre recupera più HTML da applicare gli stili ai nuovi elementi.

Forse questo è il motivo per cui, anche oggi, il collo di bottiglia di Mobile Safari non è la connessione 3G in ogni momento, ma è il rendering della pagina.

Il rendering CSS è un argomento interessante e tutti i concorrenti stanno facendo di tutto per accelerare il rendering del livello di visualizzazione (HTML e CSS) per offrire i migliori risultati agli utenti finali in un batter d’occhio.

Innanzitutto, sì, diversi browser hanno i loro parser CSS / motori di rendering

  • Chrome, Opera (dalla versione 15): utilizza il fork Webkit denominato motore di rendering dei lampeggiatori
  • Safari – utilizza Webkit (ora passa a Webkit2)
  • Internet Explorer: utilizza il motore di rendering Trident
  • Mozilla Firefox – Usa Gecko

Tutti questi motori di rendering contengono sia l’interprete CSS che il parser DOM HTML .

Tutti questi motori seguono i modelli elencati di seguito, questi sono gli standard W3C

  • Modello di elaborazione visiva
  • Box Model
  • Modello di indirizzamento CSS 2.1

Nota: tutti questi modelli sono interconnessi e interdipendenti. Non sono modelli separati che definiscono gli standard per il rendering del CSS. Questi modelli fanno luce su come i CSS vengono elaborati in base alla precedenza come stile in linea, specificità, ecc.


Spiegazione:


Fase 1:


Tutti i browser scaricano lo script HTML e CSS dal server e iniziano analizzando i tag HTML ai nodes DOM in una struttura denominata albero dei contenuti .

Mentre il documento HTML in fase di analisi dei motori di rendering del browser costruisce un altro albero chiamato albero Render . Questo albero è di elementi visivi nell’ordine in cui verranno visualizzati.

Firefox lo chiamano come frame dove i ragazzi di Webkit li chiamano come oggetti Renderer o Renderer.

Vedi l’immagine qui sotto: (Fonte: HTML5 Rocks )

inserisci la descrizione dell'immagine qui


Fase 2:


Dopo il processo sopra descritto, entrambi questi alberi attraversano il processo di Layout, il che significa che il browser indica al viewport dove ogni nodo deve essere posizionato sullo schermo.

Questo è definito come schema di posizionamento da W3C (Segui questo link per informazioni dettagliate) che indica al browser come e dove posizionare gli elementi. Di seguito sono riportati i 3 tipi.

  • Flusso normale
  • Galleggianti
  • Posizione assoluta

Fase 3:


Ora lo stadio finale chiamato Pittura . Questo è un processo graduale in cui il motore di rendering attraversa tutti i nodes dell’albero di rendering e li dipinge visivamente utilizzando il livello di backend dell’interfaccia utente. A questo punto vengono applicate tutte le Fx visuali come dimensione del carattere, colore di sfondo, pittura della tavola, ecc.

Nota: questa fase può essere osservata chiaramente se si tenta di aprire una pagina Web su una connessione lenta. I browser più moderni per una migliore esperienza utente cercano di visualizzare gli elementi il ​​prima ansible. Ciò dà all’utente un’impressione che la pagina si sta caricando e deve attendere per completare.


Schema a blocchi del stream di lavoro per una migliore comprensione

Source HTML5 Rocks

  • Webkit:

inserisci la descrizione dell'immagine qui

  • Il geco di Mozilla: inserisci la descrizione dell'immagine qui

Riferimenti: (Si prega di leggere i link qui sotto: sono le migliori risorse disponibili sul Web relative a questo argomento)

Sì, i browser hanno un interprete CSS integrato. Il motivo per cui non si “aspetta fino a window.onload” è perché mentre Javascript è un linguaggio di programmazione imperativo completo di Turing, il CSS è semplicemente un insieme di regole di stile applicate dal browser alla corrispondenza elementi che incontra.

I browser leggono le linee CSS da destra a sinistra. Questo è ciò che Google dice come Mozilla. Google afferma che “Il motore valuta ogni regola da destra a sinistra” su http://code.google.com/speed/page-speed/docs/rendering.html . Mozilla dice “Il sistema di stile corrisponde alle regole iniziando con il selettore di chiave, quindi spostandosi a sinistra” su https://developer.mozilla.org/en/Writing_Efficient_CSS

Prendiamo ad esempio questa linea CSS: ‘.item h4’. Il browser prima cerca tutti i tag ‘h4’ nella pagina e poi guarda se il tag h4 ha un genitore con il nome della class ‘elemento’. Se ne trova uno, applica la regola CSS.

Recentemente mi sono imbattuto in questo articolo sulla velocità di Google:

Mentre il browser analizza l’HTML, costruisce un albero di documenti interno che rappresenta tutti gli elementi da visualizzare. Quindi abbina gli elementi agli stili specificati in vari fogli di stile, secondo le regole CSS standard, ereditarietà e ordinamento. Nell’implementazione di Mozilla (e probabilmente anche in altri), per ogni elemento, il motore CSS cerca le regole di stile per trovare una corrispondenza. Il motore valuta ogni regola da destra a sinistra, partendo dal selettore più a destra (chiamato “chiave”) e spostandosi all’interno di ciascun selettore finché non trova una corrispondenza o scarta la regola. (Il “selettore” è l’elemento del documento a cui deve essere applicata la regola).

http://code.google.com/speed/page-speed/docs/rendering.html

Questa è la descrizione migliore che ho trovato su come il browser tratta HTML e CSS:

Il motore di rendering inizierà l’analisi del documento HTML e trasformsrà i tag in nodes DOM in un albero chiamato “albero dei contenuti”. Analizzerà i dati di stile, sia in file CSS esterni che in elementi di stile. Le informazioni sullo stile e le istruzioni visive nell’HTML verranno utilizzate per creare un altro albero, l’albero di rendering.


In generale i lavori del motore di rendering sono:

  • Tokenizzare le regole (suddividere l’input in token AKA Lexer)
  • Costruire l’albero di analisi analizzando la struttura del documento in base alle regole di syntax del linguaggio

Parser CSS

A differenza dell’HTML, il CSS è una grammatica libera dal contesto (con una grammatica deterministica).
Quindi avremo la specifica CSS che definisce la grammatica lessicale e sintattica dei CSS, che il parser applica passando attraverso il foglio di stile.

La grammatica lessicale (vocabolario) è definita dalle espressioni regolari per ciascun token:

 comment \/\*[^*]*\*+([^/*][^*]*\*+)*\/ num [0-9]+|[0-9]*"."[0-9]+ nonascii [\200-\377] nmstart [_a-z]|{nonascii}|{escape} nmchar [_a-z0-9-]|{nonascii}|{escape} name {nmchar}+ ident {nmstart}{nmchar}* 

“ident” è l’abbreviazione di identificatore, come un nome di class. “nome” è un elemento id (che è riferito da “#”)

La grammatica della syntax è descritta in BNF .

 ruleset : selector [ ',' S* selector ]* '{' S* declaration [ ';' S* declaration ]* '}' S* ; selector : simple_selector [ combinator selector | S+ [ combinator selector ] ] ; simple_selector : element_name [ HASH | class | attrib | pseudo ]* | [ HASH | class | attrib | pseudo ]+ ; class : '.' IDENT ; element_name : IDENT | '*' ; attrib : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S* [ IDENT | STRING ] S* ] ']' ; pseudo : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ] ; 

Per una descrizione completa sul stream di lavoro del browser, dai un’occhiata a questo articolo .

Credo che il browser interpreti i CSS come li trova, con l’effetto che i CSS nel corpo (in linea) hanno la precedenza sui CSS (anche esterni) nella testa