Come vengono implementati CSS e DOM nel browser?

Question

Questa è una domanda piuttosto accademica. Mi chiedo come viene implementato il browser come in quale struttura dati o algoritmo viene utilizzato per mappare un selettore CSS su un particolare elemento DOM. È realizzato attraverso una tabella hash? In che modo il nodo figlio DOM sa che lo stile applicato al genitore si applica anche a se stesso, ecc. Sto guardando il centro per sviluppatori Mozilla e non ho trovato nulla. Qualunque documentazione o libro sull'argomento sarebbe molto apprezzato ... grazie!

Answer 1

Domande di risposta alle corrispondenze "quali selettori corrispondono al nodo dato", non "quali nodi corrispondono a un selettore". Ciò consente di valutare semplicemente ciascuna parte di un selettore rispetto al nodo corrente (confronta nome nodo/ID/classe). Il combinatore e l'ereditarietà decendenti vengono eseguiti mediante la scansione dei nodi principali.

Se siete interessati cosa succede dopo, WebKit blog aveva belle serie: WebCore rendering basics

Answer 2

Lei parla di Mozilla. È certamente più facile rispondere alla tua domanda nel contesto di una particolare implementazione concreta, piuttosto che la nozione astratta di tutte le possibili implementazioni.

[W] la struttura o l'algoritmo dei dati del cappello è utilizzato per associare un selettore CSS a un particolare elemento DOM ... è realizzato tramite una tabella hash?

Suppongo che la risposta diretta alla sua domanda, per FF2, è probabile che sia in style directory del codice sorgente di Firefox. Una ricerca all'interno di quella directory per "hashtable" produce 111 risultati in 7 file.

Sono sicuro che gli hashtables sono ampiamente associati con alcuni dei processi coinvolti nel rendering degli stili CSS.

Quindi la risposta breve alla tua domanda è "Sì, ma c'è molto di più che solo tabelle hash".

Answer 3

Così qui sono i documenti scarse:

• http://www.mozilla.org/newlayout/doc/style-system.html
• https://developer.mozilla.org/en/Mozilla_Style_System

Dalla tua domanda, sembra che si dovrebbe prima imparare di più su come CSS dovrebbe funzionare (ad esempio quello che è specificità delle regole, stile calcolato).

Answer 4

W3C fornisce un approccio generale dal punto di vista definizione che trovo istruttiva:

• Assigning property values
• Selectors
• etc