MENO, Media Queries e Performance

Question

Recentemente ho iniziato con LessCSS, e ho avuto un discreto successo riguardo a quanto il mio CSS sia pulito e leggibile. Tuttavia, non penso di usare Less al suo massimo vantaggio.

Sono in procinto di codificare il mio primo sito completamente responsive usando Meno, e Mi occupo di prestazioni e velocità. Una cosa da notare è che non mi attengo a una metodologia di "breakpoint" - Io aggiusto le cose su e giù finché non si rompono, quindi scrivo CSS per correggerle; che di solito si traduce in un numero qualsiasi di 20 - 100 query multimediali.

mi piacerebbe iniziare a utilizzare meno a nidificare le media query nei miei elementi, come nell'esempio qui sotto:

.class-one { 
    //styles here 

    @media (max-width: 768px) { 
     //styles for this width 
    } 
} 
.class-two { 
    //styles here 

    @media (max-width: 768px) { 
     //styles for this width 
    } 
} 

Attraverso il mio test iniziale, ho trovato che in sede di revisione l'uscita CSS compilato - questa metodologia comporta più (molte!) istanze di @media (max-width: ___px). Ho setacciato Internet e non ho trovato nulla che spieghi in modo esplicito le implicazioni sul rendimento delle query multimediali di nidificazione/bubbling.

Aggiornamento 1: Mi rendo conto che più informazioni CSS generano un file CSS più grande da scaricare, ma non sono preoccupato del tempo di caricamento del sito come unica metrica. Sono più interessato alla gestione del browser della memoria e delle prestazioni dopo che il DOM è pronto.

Aggiornamento 2 & Semi-Soluzione: Ho trovato this article which discusses the four main categories of CSS selectors and their efficiencies. Consiglio vivamente la lettura che mi ha aiutato a capire come affrontare al meglio il mio CSS over-media-query.

Quindi la mia domanda è questa: dopo che il DOM è pronto, le numerose query multimediali nel mio foglio di stile compilato avranno effetto sui tempi di caricamento delle prestazioni &?

Answer 1

È quasi impossibile darvi una risposta completamente accurata.

Quando si parla di prestazioni, la risposta tipica è rappresentarla e vedere ciò che si ottiene. Risolvi prima la parte più lenta, poi ripeti.

È possibile profilo selettori CSS negli strumenti per sviluppatori di Chrome:

In definitiva non credo che le media query avranno da nessuna parte vicino tanto impatto sulle prestazioni rispetto ad anche un selettore po 'complicato.

È possibile visualizzare ulteriori informazioni sulla scrittura efficace CSS qui:

https://developers.google.com/speed/docs/best-practices/rendering

anche per quanto riguarda dimensione del file e ripetuto CSS, gzip quasi completamente annulla questo come l'algoritmo gzip funziona meglio con i dati ripetuti .