Ho eseguito un test di velocità su Google e ho ottenuto buoni voti e voti negativi per il mio CSS. I brutti voti sono dovuti a un CSS inefficiente. Cos'è quello? E come posso correggerlo?Che cosa sono le regole molto inefficienti in css
Very inefficient rules (good to fix on any page):
#menu ul ul li:first-child a:after Tag key with 4 descendant selectors
#menu ul ul li:first-child a:hover:after Tag key with 4 descendant selectors
I browser analizzano i selettori CSS da destra a sinistra. Quindi i CSS vengono analizzati più velocemente, se si hanno selettori meno discendenti.
selettori discendenti sono inefficienti perché, per ogni elemento che corrisponde alla chiave, il browser deve anche attraversare l'albero DOM, valutando ogni elemento antenato finché non trova una corrispondenza o raggiunge l'elemento principale. Minore è la chiave, maggiore è il numero di nodi che devono essere valutati.