Stellen Sie sich vor, ich hätte dieses Setup:
%Vor%und diese Stildefinition:
%Vor%Ich möchte eigentlich eine kleine 2-Pixel-Grenze zwischen den 2 "Symbolleisten", also sehe ich 2 allgemeine Möglichkeiten,
1) Fügen Sie dem "dialog" div und dem ersten "toolbar" eine Hintergrundfarbe hinzu:
%Vor%2) Fügen Sie der ersten Symbolleiste einen 2-Pixel-Rahmen hinzu:
%Vor%Gibt es einen Unterschied in Bezug auf die "Kosten" beim Rendering / Anwenden? Was ist in diesem Ausmaß wünschenswerter?
Ich weiß, dass dies ein sehr kleines Beispiel ist und es keinen wirklichen Unterschied machen kann, aber stellen Sie sich eine Seite mit Dutzenden dieser Dialoge vor (Dialoge?).
Ich denke, wir werden einen wirklichen Unterschied in der Leistung nur mit Zehntausenden von Elementen sehen, sonst bleibt es im Millisekundenbereich.
Also mein Tipp: Bleiben Sie bei der einfachsten / einfachsten Art und Weise, die wahrscheinlich die "direkte" Umrandung der ersten Symbolleiste hinzufügt. :)
Was für eine zeitgerechte Frage!
Ich habe diesen ausgezeichneten Artikel vor ein paar Tagen über die Leistung von CSS gelesen. Zugegeben, die CSS-Selektorleistung ist winzig verglichen mit dem Aufwand, der für die Bereitstellung einer ganzen Seite aufgewendet wird, aber es ist immer noch etwas, das man im Auge behalten sollte.
BEARBEITEN
Ich habe nicht bemerkt, dass es sich um CSS-Regeln und nicht um Selektoren handelte. Versuchen Sie, diese Frage jetzt zu beantworten.
Wie ich in meiner ursprünglichen Antwort gesagt habe, ist die CSS-Leistung der Bereich, in dem Sie die geringste Leistung in Ihrem System erzielen können ( allgemein , es sei denn, Sie verwenden Dinge wie Filter). und sollte zuletzt angegangen werden, wenn Sie Ihre Website auf Ihre Website abstimmen möchten. Es ist besser, es lesbar zu halten und zuerst an den anderen Teilen der Site zu arbeiten.
persönlich Ich denke, Ihre zweite Option ist die beste, Sie fügen einen Rahmen, so dass Grenze verwenden;) - aber ich würde es umgekehrt und fügen Sie den Rand der zweiten Symbolleiste .. Stellen Sie sich vor, Sie haben mehr als 2, was Sie wollen eigentlich, dass die zweite und die folgenden eine obere Grenze haben, aber nicht die erste
%Vor% so dass .first class es macht und es speziell überschreibt
Ohne zu wissen, welcher Browser und wie die CSS implementiert ist, wie die Elemente gerendert werden, die sich je nach Plattform-Hardware unterscheiden können, ist es sehr schwierig herauszufinden. Was heute langsam ist, könnte im nächsten Monat schnell sein (und umgekehrt!)
Über die einzige Annahme, die Sie machen können, ist, dass alle Browser-Hersteller wollen, dass ihr Code so schnell wie möglich funktioniert ...
Halten Sie Ihr CSS lesbar, konsistent und wartbar ist viel wichtiger als "Leistung".
Ich würde empfehlen, es so zu schreiben, wie es gemeint ist, und es nur zu optimieren, wenn Sie Grund dazu haben. Wenn der Platz logisch zu dem Dialog gehört, dann sollten Sie ihn dem Dialog hinzufügen, und dann können Sie wahrscheinlich die "erste" Deklaration verwerfen.
Selbst wenn Sie Hunderte dieser Dialoge haben, werden Sie keinen Unterschied bemerken, jedenfalls ist es der Client-Browser, der die Seite rendern wird und der Server nicht betroffen ist.
Tags und Links html css performance