Fassen Sie einige der CSS-Schreiberfahrungen zusammen, die ich gelernt, gehört, beobachtet und gefragt habe, und schreiben Sie effizientes CSS. Sprechen Sie über die Rendering-Effizienz von CSS, die mit der Rendering-Effizienz und den verbrauchten Ressourcen zusammenhängt. Ein Teil davon basiert auf meinem eigenen Verständnis. Es ist nicht ausgeschlossen, dass es Fehler und Auslassungen geben kann. Sie können gerne bessere Meinungen abgeben.
1. Hexadezimale Farbwertpaarung aus Ziffern und Groß-/Kleinschreibung
Beim Schreiben hexadezimaler Farbwerte können Sie Kleinbuchstaben verwenden oder diese in 3 Ziffern weglassen. Es gibt keine schlüssigen Daten, die belegen, ob diese Schreibmethode einen Einfluss auf die Rendering-Effizienz des Browsers hat, sondern der Standardstandard für hexadezimale Farbwerte ist Es ist ein Großbuchstabe und eine 6-stellige Zahl. Wenn man in unbekannten Situationen kein Risiko eingehen möchte, verringert sich die Rendering-Effizienz.
* Abgelehnt – Farbe:#f3a;
* Es wird empfohlen, - color:#FF33AA;
2. Der Unterschied zwischen Anzeige und Sichtbarkeit
Sie werden verwendet, um festzulegen oder abzufragen, ob das Objekt angezeigt wird. Die Anzeige ausgeblendeter Objekte behält keinen physischen Platz bei, und die Sichtbarkeit behält den physischen Platz bei, der von ausgeblendeten Objekten eingenommen wird. Wenn der Browser den belegten physischen Speicherplatz rendert, werden Ressourcen verbraucht.
* Veraltet – Sichtbarkeit:versteckt;
* Es wird empfohlen, - display:none;
3. Der Unterschied zwischen border:none und border:0;
Ähnlich wie bei der Beziehung zwischen Anzeige und Sichtbarkeit ist der Platz nicht reserviert bzw. reserviert. Mehr über border:0; Obwohl der Rand ausgeblendet werden kann, bleibt die Verwendung von border-color/border-style für Sie erhalten.
* Abgelehnt – border:0;
* Es wird empfohlen, - border:none;
4. Zu kleine Hintergrundbilder sollten nicht gekachelt werden.
Obwohl die Dateigröße eines Hintergrundbilds mit einer Breite und Höhe von 1 Pixel sehr klein ist, erfordert das Rendern eines Panels mit einer Breite und Höhe von 500 Pixeln eine wiederholte Kachelung von 2500 Malen. Die Verbesserung der Effizienz beim Rendern von Hintergrundbildern hängt von der Bildgröße und dem Volumen ab. Die größte Bilddateigröße beträgt weiterhin etwa 70 KB.
* Abgelehnt – Hintergrundbilder unter 8 Pixel in Breite und Höhe kacheln
* Empfohlene Verwendung – ein Hintergrundbild mittlerer Größe und Größe
5. IE-Filter
Die Filter des IE verbrauchen nicht nur Ressourcen, sondern weisen auch Kompatibilitätsprobleme auf. Es gibt einen Filter, der PNG transparent macht. Sie können die Verwendung dieses Filters vermeiden, indem Sie GIF oder JPG transparent erscheinen lassen. Es wird empfohlen, in IE6 nur GIF-Transparenz zu verwenden, da IE7 und höher bereits PNG-Transparenz unterstützen.
* Missbilligung und Missbrauch von IE-Filtern verbrauchen nicht nur Ressourcen, sondern verursachen auch Kompatibilitätsprobleme.
* Empfohlen. Wählen Sie am besten andere Methoden, um die Verwendung von Filtern zu vermeiden.
6. *{margin:0; padding:0;} um Unterschiede im Browserstil zu vermeiden
Der Platzhalter * initialisiert alle Tags und das Browser-Rendering verbraucht bestimmte Ressourcen. Einige Tags sind in verschiedenen Browsern fast gleich, oder einige Tags werden nicht mehr empfohlen (da sie nicht erneut initialisiert werden müssen). Dies kann einige Ressourcen sparen.
* Veraltet, verwenden Sie den Platzhalter *
* Abgelehnt, div span button b table und andere Tags sollten in Platzhaltern enthalten sein, um interne und externe Füllstile zu steuern
* Es wird empfohlen, selektiv Platzhalter zu verwenden, um die inneren und äußeren Füllstile zu steuern.
7. Fügen Sie keine zusätzlichen Tags hinzu, um die Klasse oder ID zu beschreiben
Wenn Sie einen Selektor haben, der id als Schlüsselselektor verwendet, fügen Sie bitte keine zusätzlichen Tag-Namen hinzu. Da die ID eindeutig ist, sollten Sie die Matching-Effizienz nicht aus einem nicht vorhandenen Grund verringern.
* Veraltet – button#backButton { }
* Veraltet – .menu-left #newMenuIcon { }
* Es wird empfohlen, - #backButton { } zu verwenden
* Es wird empfohlen, - #newMenuIcon { } zu verwenden.
8. Versuchen Sie, die speziellste Klasse zum Speichern des Selektors auszuwählen
Einer der Hauptgründe für die Verringerung der Systemeffizienz besteht darin, dass wir in Tag-Klassen zu viele Selektoren verwenden. Durch das Hinzufügen von Klassen zu Elementen können wir Kategorien in Klassen unterteilen, sodass wir keine Zeit damit verschwenden müssen, zu viele Selektoren für ein Tag abzugleichen.
* Veraltet – treeitem[mailfolder="true"] > treerow > treecell { }
* Es wird empfohlen, - .treecell-mailfolder { } zu verwenden
9. Vermeiden Sie Nachkommenselektoren
Der Nachkommenselektor ist der ressourcenintensivste Selektor in CSS. Es ist wirklich sehr ressourcenintensiv, insbesondere wenn der Selektor eine Label-Klasse oder eine allgemeine Klasse verwendet. In vielen Fällen wollen wir wirklich einen Unterselektor. Sofern nicht ausdrücklich angegeben, ist die Verwendung von Nachkommenselektoren in UI-CSS strengstens untersagt.
* Veraltet – Treehead Treerow Treecell { }
* Besser, funktioniert aber immer noch nicht (siehe nächster Artikel) - Treehead > Treerow > Treecell { }
10. Fügen Sie keine Unterselektoren in Etikettenklassen ein
Verwenden Sie in Beschriftungsklassen keine Unterselektoren. Andernfalls erhöht jedes Vorkommen eines Elements zusätzlich die Matching-Zeit. (Vor allem, wenn der Selektor wahrscheinlich übereinstimmt)
* Veraltet – Treehead > Treerow > Treecell { }
* Es wird empfohlen, - .treecell-header { } zu verwenden
11. Achten Sie auf die Verwendung aller Unterselektoren
Gehen Sie mit Unterselektoren vorsichtig um. Wenn Ihnen eine Möglichkeit einfällt, es nicht zu verwenden, dann verwenden Sie es nicht. Insbesondere RDF-Bäume und -Menüs verwenden häufig Unterselektoren wie diesen.
* Veraltet – treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }
Denken Sie daran, dass RDF-Eigenschaften in Vorlagen kopiert werden können! Auf diese Weise können wir die RDF-Attribute auf die untergeordneten XUL-Elemente kopieren, die wir basierend auf diesem Attribut ändern möchten.
* Es wird empfohlen, - .tree-folderpane-icon[IsImapServer="true"] { } zu verwenden.