In diesem Artikel werden 20 Methoden zur Optimierung von CSS erörtert, um die Ladegeschwindigkeit zu verbessern, die Entwicklung zu vereinfachen und die Effizienz zu verbessern. Laut dem neuesten HTTP -Archivbericht gibt es ein weit verbreitetes Problem der Ressourcenreduktion auf Websites, mittlere Websites benötigen 1700 KB Daten, 80 HTTP -Anfragen und es dauert 17 Sekunden, bis mobile Geräte voll geladen werden. Eine vollständige Anleitung zur Reduzierung des Seitengewichts bietet eine Vielzahl von Vorschlägen. Dieser Artikel konzentriert sich auf die CSS -Optimierung. Obwohl CSS normalerweise nicht der Schuld von Leistungsproblemen ist, verwendet eine typische Website nur 40 KB CSS, die in fünf Stilblättern verstreut sind. Es gibt immer noch Raum für die Optimierung und eine Änderung der Art und Weise, wie CSS verwendet wird, kann auch die Leistung der Website verbessern.
Schlüsselpunkte
Das Leistungsproblem kann nur gelöst werden, wenn Sie das Problem kennen. Browser -Entwickler -Tools sind der beste Ausgangspunkt: Starten Sie im Menü oder drücken Sie f12 , Strg Shift i oder Safari auf MacOS Cmd Alt i . Alle Browser bieten ähnliche Funktionen, und das Tool wird langsam auf schlecht leistungsstarken Seiten geladen! Zu den nützlichsten Registerkarten gehört jedoch die folgenden Registerkarten… Die Registerkarte "Netzwerk" zeigt ein Wasserfalldiagramm des Ressourcen -Downloads an. Deaktivieren Sie das Caching und erwägen Sie, die Netzwerkgeschwindigkeit zu verlangsamen. Finden Sie Dateien, die langsam herunterladen oder andere Ressourcen blockieren. Browser blockieren normalerweise das Browser -Rendering, wenn CSS und JavaScript -Dateien heruntergeladen und analysiert werden. Die Registerkarte Performance analysiert Browserprozesse. Starten Sie die Aufzeichnung, führen Sie Aktivitäten wie das Seiten -Nachladen aus und stoppen Sie dann die Aufzeichnung, um die Ergebnisse anzuzeigen. Suche: 1. Zu viele Layout/Neuanordnung Operationen ist der Browser gezwungen, die Position und Größe der Seitenelemente neu zu berechnen. A. Dies ist normalerweise der am wenigsten prozessor-ressourcenverbrauchende Betrieb.
Der Chrome-basierte Browser bietet eine Registerkarte "Audit", auf der Googles Lighthouse-Tool ausgeführt wird. Es wird normalerweise von progressiven Webanwendungsentwicklern verwendet, bietet aber auch CSS -Leistungsempfehlungen.
Online -Optionen
oder verwenden Sie Online -Analyse -Tools, die nicht von Geräte- und Netzwerkgeschwindigkeiten und -funktionen betroffen sind. Die meisten Werkzeuge können aus verschiedenen Orten auf der ganzen Welt getestet werden:
CSS eine direkte Ursache für Leistungsprobleme ist. Es kann jedoch in schweren Ressourcen mit Schwergewichtsressourcen geladen werden, die innerhalb von Minuten optimiert werden müssen. Zum Beispiel:
Bilder sind normalerweise der Grund für die größte Seitengröße, aber viele Websites optimieren nicht effektiv:
, also beachten Sie, dass die Bilddaten von x kb nicht dem CSS -Code von x kb entsprechen. Binäre Bilder werden parallel heruntergeladen und müssen nur wenig verarbeiten, um auf der Seite zu platzieren. CSS blockiert das Rendering und muss in ein Objektmodell analysiert werden, um fortzufahren.
Es ist selten, Hintergrundbilder zu verwenden, um Grenzen, Schatten, abgerundete Ecken, Gradienten und einige geometrische Formen zu erstellen. Das Definieren von "Bildern" mit CSS -Code verwendet weniger Bandbreite und ist später einfacher zu ändern oder zu animieren.
Dienste wie Google -Schriftarten erleichtert es einfach, jeder Seite benutzerdefinierte Schriftarten hinzuzufügen. Leider können ein oder zwei Codezeilen Hunderte von Kilobyten von Schriftartaten abrufen. Vorschläge:
Verwenden Sie nur die erforderlichen Schriftarten.
Laden Sie nur die erforderliche Dicke und Stile - zum Beispiel römisch, 400 Dicke, keine Kursivschrift.
Limitcharakter legt so weit wie möglich ein. Mit Google -Schriftarten können Sie bestimmte Zeichen auswählen, indem Sie der Schriftart -URL einen &text= -Wertzwert hinzufügen - beispielsweise fonts.googleapis.com/css?family=Open Sans&text=SitePon, um "sitepoint" in offenen Sans anzuzeigen.
Betrachten Sie variable Schriftarten, die mehrere Dicke und Stile durch Interpolation definieren, sodass die Datei kleiner ist. Derzeit ist die Unterstützung auf Chrome, Edge und einige Versionen von Safari beschränkt, sollte jedoch schnell wachsen.
Betrachten Sie das Betriebssystem -Schriftarten. Ihre 500-KB-Web-Schriftart ist vielleicht markenfreundlich. Wenn Sie jedoch zu der häufig verwendeten Helvetica oder Arial wechseln, wird es jemand bemerken? Viele Websites verwenden benutzerdefinierte Web -Schriftarten, sodass die Standard -Betriebssystemschriften viel geringer sind als zuvor!
Vermeiden Sie @import
@import Regeln ermöglichen es, dass jede CSS -Datei in eine andere CSS -Datei aufgenommen wird. Zum Beispiel:
/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css"); Dies scheint eine vernünftige Möglichkeit zu sein, kleinere Komponenten und Schriftarten zu laden. Dies ist nicht der Fall. Regeln können verschachtelt werden, sodass der Browser jede Datei in der Reihenfolge laden und analysieren muss. Mehrere @import Tags in HTML laden CSS -Dateien parallel, was viel effizienter ist - insbesondere bei der Verwendung von HTTP/2: <link>
<link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="carousel.css">
CSS Flexbox wird für eindimensionale Layouts verwendet, die Linien an der nächsten Zeile basierend auf der Breite jedes Blocks einwickeln können. Flexbox ist sehr geeignet für Menüs, Fotogalerien, Karten und mehr.
widgets/_carousel.css klar definiert ist. !important, um Kaskaden zu überschreiben. Tools wie UNCSS können dazu beitragen, redundanten Code durch Analyse Ihrer HTML zu entfernen.
Der Aufstieg von CSS-in-JS ermöglicht es Entwicklern, globale CSS-Namespaces zu vermeiden. Normalerweise werden zufällig generierte Klassennamen zum Zeitpunkt der Erstellung erstellt, sodass Komponenten nicht konfliktfrei sind. Wenn CSS-in-JS Ihr Leben verbessert, verwenden Sie es weiter. Es lohnt sich jedoch, die Vorteile des CSS -Kaskadens zu verstehen, anstatt es in jedem Projekt zu bekämpfen. Beispielsweise können Sie Standardfelder, Farbe, Größe, Tabelle und Formular festlegen, die üblicherweise an jedem Element an einem einzelnen Ort angewendet werden. Es ist selten, jeden Stil in jeder Komponente zu deklarieren.
Selbst die komplexesten CSS -Selektoren brauchen ein paar Millisekunden analysiert, aber die Reduzierung der Komplexität verringert die Dateigröße und hilft Browser analysieren. Benötigen Sie diesen Selektor wirklich? !
/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");Achten Sie in ähnlicher Weise, dass Sie sich der tiefen Verschachtelung in Präprozessoren wie SASS bewusst sind, bei denen komplexe Selektoren versehentlich erstellt werden können.
Einige Eigenschaften werden langsamer als andere. Um die Verzögerung zu erhöhen, platzieren Sie Boxschatten für alle Elemente!
<link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="carousel.css">
Die Browserleistung variiert, aber im Allgemeinen wird jede Operation, die eine Neuberechnung vor dem Zeichnen verursacht, in Bezug auf die Leistung teurer:
border-radius box-shadow opacity transform filter position: fixed native CSS -Conversions und -Animationen sind immer schneller als JavaScript -Treiber, die dieselben Eigenschaften ändern. CSS -Animationen funktionieren in älteren Browsern wie IE9 und unten nicht, aber diese Benutzer werden nie wissen, was sie vermissen. Das heißt, vermeiden Sie Animation für Animation. Subtile Effekte können die Benutzererfahrung verbessern, ohne die Leistung nachteilig zu beeinflussen. Zu viel Animation kann den Browser verlangsamen und bei einigen Benutzern eine Bewegungskrankheit verursachen.
Animieren der Größe oder Position des Elements kann dazu führen, dass die gesamte Seite auf jedem Rahmen erneut lag. Wenn die Animation nur die Synthese Stufe beeinflusst, kann die Leistung verbessert werden. Die effektivste Animationsverwendung:
opacity und/oder transform, um Elemente zu panieren (zu bewegen), skalieren oder drehen (der vom Element verwendete ursprüngliche Speicherplatz ändert sich nicht). Browser verwenden normalerweise hardwarebeschleunigte GPUs, um diese Effekte zu rendern. Wenn auch nicht ideal ist, sollten Sie position: absolute in Betracht ziehen, um Elemente aus dem Seitenstrom zu entfernen, damit sie in ihren eigenen Schichten animieren können.
will-change Attribut ermöglicht es dem CSS -Autor, anzuzeigen, dass die Elemente animiert werden, damit der Browser die Leistungsoptimierung im Voraus durchführen kann. Zum Beispiel zu erklären, dass die Anwendung in ein Element konvertiert wird:
/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");Eine beliebige Anzahl von von Kommas getrennten Eigenschaften kann definiert werden. Aber:
will-change als letztes Ausweg, um Leistungsprobleme zu lösen skalierbare Vektorgrafiken (SVG) werden üblicherweise für Logos, Diagramme, Symbole und einfachere Diagramme verwendet. Anstatt die Farbe jedes Pixels wie JPG- und PNG -Bitmaps zu definieren, definiert SVG Formen wie Linien, Rechtecke und Kreise mit XML. Zum Beispiel:
<link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="carousel.css">
Einfachere SVGs sind kleiner als äquivalente Bitmaps und können unendlich skaliert werden, ohne Klarheit zu verlieren. SVG kann direkt als Hintergrundbilder im CSS -Code eingegeben werden. Dies kann ideal für kleinere, wiederverwendbare Symbole sein und vermeidet zusätzliche HTTP -Anforderungen. Zum Beispiel:
body > main.main > section.first h2:nth-of-type(odd) + p::first-line > a[href$=".pdf"]
typischer ist SVG direkt in HTML -Dokumente eingebettet:
*, ::before, ::after {
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}Dies fügt den SVG -Knoten direkt zum DOM hinzu. Daher können alle Eigenschaften im SVG -Stil mit CSS angewendet werden:
.myelement {
will-change: transform;
} Die Anzahl der eingebetteten SVG -Code wird reduziert, und CSS -Stile können nach Bedarf wiederverwendet oder animiert werden. Beachten Sie, dass die Verwendung von SVG in img Tags oder als CSS -Hintergrundbilder bedeutet, dass sie vom DOM getrennt sind und der CSS -Stil nicht funktioniert.
Standard -Bitmap -JPG, PNG und GIF können als Base64 -Zeichenfolgen in Data URI codiert werden. Zum Beispiel:
<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /> </svg>
leider:
Während der Reduzierung von HTTP -Anforderungen bietet es selten offensichtliche Vorteile - insbesondere bei HTTP/2 -Verbindungen. Vermeiden Sie im Allgemeinen Inline -Bitmaps, es sei denn, das Bild ändert sich nicht häufig und die resultierende Basis64 -Zeichenfolge ist unwahrscheinlich, dass es einige hundert Zeichen überschreitet.
Benutzer, die Google Page Analytics -Tools verwenden, sehen normalerweise Vorschläge "Inline Critical CSS" oder "Reduzieren Sie die Render -Blockierungsstile" . Laden einer CSS -Dateiblöcke, damit Sie die folgenden Schritte verwenden können, um die Leistung zu verbessern:
<head> Element in html <style> hinzu. Diese Technologie verbessert zweifellos die Leistung und kann progressive Web- oder einseitige Anwendungen mit einer kontinuierlichen Schnittstelle zugute kommen. Für andere Websites/Apps können die Vorteile weniger offensichtlich sein:
Jedes
/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");. Progressives Rendering kann großen Websites zugute kommen, auf denen einzelne Seiten mit Auswahl verschiedener Komponenten erstellt werden. <link>
Der wichtigste Tipp: Lernen Sie Ihr Stylesheet! Das Hinzufügen einer Menge CSS aus Stackoverflow oder Bootstrap kann schnelle Ergebnisse erzielen, aber es wird auch Ihre Codebasis mit nicht verwendeten Müll aufblähen. Eine weitere Anpassung wird frustrierend schwierig und die Anwendung wird niemals effizient sein. CSS ist leicht zu lernen, aber schwer zu meistern. Wenn Sie einen gültigen Client -Code erstellen möchten, können Sie diese Technik nicht vermeiden. Das Verständnis einiger CSS -Grundlagen kann Ihren Workflow revolutionieren, Ihre Anwendung verbessern und die Leistung erheblich verbessern. Vermisse ich Ihre Lieblings -CSS -Performance -Tipps?
Häufig gestellte Fragen zur Optimierung der CSS -Leistung
CSS -Leistung wird von einer Vielzahl von Faktoren beeinflusst. Erstens ist die Größe der CSS -Datei. Größere Dateien dauern länger, um herunterzuladen und zu analysieren und so die Website zu verlangsamen. Der zweite Faktor ist die Komplexität des CSS -Selektors. Komplexe Selektoren erfordern mehr Verarbeitungsleistung, um Elemente auf der Seite zu entsprechen. Schließlich kann die Verwendung von CSS -Animationen und -Transformationen auch die Leistung beeinflussen, insbesondere auf mobilen Geräten mit begrenzter Verarbeitungsleistung.
Es gibt verschiedene Strategien, um die Größe von CSS -Dateien zu verringern. Eine ist, nicht verwendete Stile zu löschen. Tools wie PurifyCSS können dazu beitragen, nicht verwendete CSS zu identifizieren und zu löschen. Eine andere Strategie besteht darin, CSS zu komprimieren, das unnötige Zeichen wie Räume und Kommentare beseitigt. Erwägen Sie schließlich, das CSS -Komprimierungswerkzeug zu verwenden oder die GZIP -Komprimierung auf dem Server zu aktivieren, um die Dateigröße weiter zu reduzieren.
komplexe CSS -Selektoren verlangsamen Websites, da sie mehr Verarbeitungsleistung benötigen, um Elemente auf der Seite zu entsprechen. Beispielsweise sind Nachkommenswahloren (z. B. .parent .child) teurer als Klassenauswahl (z. B. .class). Als Faustregel sollten die Selektoren so einfach und spezifisch wie möglich gehalten werden, um die Leistung zu verbessern.
CSS -Animationen und -Transformationen können die Leistung erheblich beeinflussen, insbesondere auf mobilen Geräten mit begrenzter Verarbeitungsleistung. Sie können Layout -Offsets und -Trauen verursachen, die die Website verlangsamen können. Um die Leistung zu verbessern, sollten Sie das Attribut will-change in Betracht ziehen, um den Browser im Voraus mitzuteilen, welche Attribute und Elemente animiert werden.
Die Optimierung von CSS für mobile Geräte beinhaltet eine Vielzahl von Strategien. Erwägen Sie zunächst die Verwendung von Medienabfragen, um unterschiedliche Stile basierend auf den Geräteeigenschaften bereitzustellen. Vermeiden Sie zweitens komplexe Animationen und Transformationen, die die Leistung auf mobilen Geräten verlangsamen. Erwägen Sie schließlich, ansprechende Bilder und faule Laden zu verwenden, um die Datenmenge zu verringern, die Sie zum Herunterladen benötigen.
Sie können eine Vielzahl von Tools verwenden, um die CSS -Leistung zu messen. Die Leuchtturm- und PageSpeed -Erkenntnisse von Google können einen umfassenden Überblick über die Website -Leistung, einschließlich CSS, bieten. Darüber hinaus kann das Leistungspanel von Chrome Developer Tools Ihnen helfen, teure CSS zu identifizieren und zu optimieren.
Während CSS selbst die SEO nicht direkt beeinflusst, wirkt sich dies indirekt auf Ihr Ranking aus. Langsame Websites (normalerweise durch große, nicht optimierte CSS verursacht) können zu einer schlechten Benutzererfahrung führen, die sich negativ auf Ihre SEO auswirken kann. Darüber hinaus behandelt Google die Seitengeschwindigkeit als Ranking -Faktor, sodass die Optimierung von CSS dazu beitragen kann, Ihre SEO zu verbessern.
CSS -Präprozessoren wie SASS und Weniger können dazu beitragen, die Leistung zu verbessern, indem Sie effizienter und leichter für die Wartung von Code schreiben können. Sie bieten Funktionen wie Variablen, Nisten und Mischungen, die die Menge an Code verringern, die Sie schreiben müssen, und erleichtern die Verwaltung.
Critical CSS ist die minimale Menge an Blockierung von CSS, die erforderlich sind, um den Inhalt über dem Webseitenbildschirm zu rendern. Durch die Identifizierung und Einbeziehung kritischer CSS können Sie die anfängliche Darstellung Ihrer Seite beschleunigen und so die Wahrnehmungsleistung verbessern.
Optimierung der CSS -Lieferung beinhaltet eine Vielzahl von Strategien. Erwägen Sie zunächst, dass kleine CSS direkt in HTML einbezogen werden, um zusätzliche HTTP -Anforderungen zu vermeiden. Zweitens verzögern Sie nicht kritische CSS, um die Ressourcen für die Renderblockierung zu verringern. Erwägen Sie schließlich, HTTP/2 zu verwenden, um CSS -Dateien effizienter zu liefern.
Das obige ist der detaillierte Inhalt von20 Tipps zur Optimierung der CSS -Leistung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So exportieren Sie Apipost offline
jquery animieren
So starten Sie regelmäßig neu
Was wird mit dem Artikel-Tag definiert?
So rufen Sie externe JS in HTML auf
So finden Sie den größten gemeinsamen Teiler in der Sprache C
Einführung in die Verwendung der Achsenfunktion in Matlab
Welche Software gibt es zum Erlernen von Python?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
