Come fanno i caching dei CSS e perché solo .alert o .danger ma non .alert.danger? [chiuso]

0

Ho letto di BEM & OBCSS qui e da qualche parte l'autore ha menzionato questo:

Decoupling selector will not only increase maintainability and scalability: it will speed up the rendering. Most web browsers are caching first-level selectors. .alert and .danger will be cached but not .alert.danger!

In particolare, in che modo i browser inseriscono nella cache queste regole e perché solo le regole con una specificità inferiore?

Sono curioso perché non sapevo che i browser nascondano effettivamente le regole CSS. Qualcuno può dare una spiegazione ragionevole sulla memorizzazione nella cache CSS?

La velocità è notevole per enormi quantità di CSS?

    
posta Pascal Raszyk 05.10.2015 - 20:47
fonte

1 risposta

3

Penso che si riferisca alla tendenza dell'implementazione del browser di memorizzare nella cache gli elementi con una classe specifica. Cioè tengono un elenco di tutti gli elementi per ogni classe. Vedrai spesso commenti sui selettori di memorizzazione nella cache per motivi di prestazioni per i selettori lunghi. (Di solito basta dire al programmatore di non eseguire più query sulla stessa cosa in JQuery se è costoso). Non è davvero qualcosa a cui bisogna pensare per quanto riguarda lo stile. Quando inserisci un nuovo nodo nel DOM, le ricerche sono abbastanza veloci.

A seconda della pagina anche se in realtà può essere evidente con le query Javascript. Ho scritto la documentazione come un software che utilizzava molte classi ripetitive e interrogava i selezionatori complessi. Ho accidentalmente duplicato lo stesso selettore all'interno di un ciclo for e il programma ha funzionato fino a quando non l'ho tirato fuori dal loop. Bisogna usare un po 'di buonsenso e capire che una ricerca selettiva potrebbe fare del lavoro dietro le quinte per abbinare tutti gli elementi.

Immagino, se è vero che i selettori CSS non sono memoized dopo la prima classe, che è fatto per ragioni di memoria. Memorizzare gli elenchi di tutti gli elementi che corrispondono a specifiche regole CSS e tenerne traccia quando gli elementi vengono aggiunti e rimossi potrebbe potenzialmente consumare molta memoria e CPU inutile su dispositivi di piccole dimensioni. (Potenzialmente per un guadagno molto basso se le query non sono frequenti).

Inoltre, ogni browser può implementare comunque le cose che vuole sotto il cofano. MDN ha questo articolo: link su alcune best practice. È possibile che altri browser abbiano le proprie guide.

    
risposta data 06.10.2015 - 00:53
fonte

Leggi altre domande sui tag