WENIGER, Media Queries und Performance

Question

Ich habe vor kurzem mit LessCSS begonnen, und ich habe ziemlich viel Erfolg in Bezug auf, wie sauber und lesbar meine CSS geworden ist. Ich glaube jedoch nicht, dass ich Less zu seinem vollen Vorteil nutze.

Ich bin gerade dabei, meine erste vollständig reaktionsschnelle Seite mit Less zu programmieren, und Ich bin besorgt um Leistung und Geschwindigkeit. Eine Sache zu beachten ist, dass ich nicht bei einer "Breakpoint" -Methode bleibe - ich skaliere Dinge rauf und runter, bis sie kaputt sind, dann schreibe ich CSS, um sie zu beheben; was in der Regel irgendwo zwischen 20 - 100 Medienabfragen ergibt.

Ich möchte die Medien-Anfragen in meinem Elemente mit weniger zu Nest starten, wie das folgende Beispiel:

.class-one { 
    //styles here 

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

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

Durch meine ersten Tests habe ich gefunden, dass, wenn die kompilierte CSS Ausgabe der Überprüfung - Diese Methode führt zu mehreren (vielen!) Instanzen von @media (max-width: ___px). Ich habe das Internet durchforstet und nichts gefunden, was die Performance-Implikationen von Nesting/Bubbling Media Queries explizit erklärt.

Update 1: Ich weiß, dass mehr CSS-Informationen in einer größeren CSS-Datei zum Download führt - aber ich bin nicht so besorgt über die Ladezeit der Website als eine einzige Metrik. Ich bin mehr daran interessiert, wie der Speicher und die Leistung des Browsers behandelt werden, nachdem das DOM fertig ist.

Update 2 & Semi-Lösung: fand ich this article which discusses the four main categories of CSS selectors and their efficiencies. Ich empfehle die Lektüre, die mir geholfen hat, herauszufinden, wie ich am besten mit meiner CSS umgehen kann.

Also meine Frage ist das: , nachdem das DOM bereit ist, wird dies viele Medien Abfragen in meinem kompilierten Stylesheet Auswirkungen auf Ladezeiten & Leistung haben?

Answer 1

Es ist fast unmöglich, Ihnen eine völlig genaue Antwort zu geben.

Wenn Sie nach Leistung fragen, ist die typische Antwort, sie zu profilieren und zu sehen, was Sie bekommen. Fixieren Sie zuerst den langsamsten Teil und wiederholen Sie den Vorgang.

Sie können CSS-Selektoren in den Chrome-Entwicklertools Profil:

Letztendlich denke ich nicht, dass die Medien-Anfragen nur annähernd so viel Einfluss auf die Leistung im Vergleich zu einem noch etwas komplizierter Wähler haben wird.

können Sie weitere Informationen finden Sie über effiziente CSS zu schreiben hier:

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

Auch hinsichtlich Größe und wiederholt CSS-Datei, gzip fast vollständig dies zunichte machen als der gzip-Algorithmus am besten mit wiederholten Daten arbeitet .