8 wissenswerte Tipps zur CSS-Leistungsoptimierung

Dieser Artikel stellt Ihnen 8 Tipps zur CSS-Leistungsoptimierung vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Wir alle wissen, dass die Leistung einer Website von entscheidender Bedeutung ist. Als wichtiger Teil der Seitendarstellung und Inhaltspräsentation beeinflusst CSS das erste Erlebnis des Benutzers mit der gesamten Website. Daher kann die damit verbundene Leistungsoptimierung nicht ignoriert werden.

Wir ziehen die Leistungsoptimierung oft erst in Betracht, wenn das Projekt abgeschlossen ist. Oft wird es auf das Ende des Projekts verschoben, oder selbst wenn ernsthafte Leistungsprobleme aufgedeckt werden.

Der Autor ist der Ansicht, dass wir, um diese Situation zu vermeiden, zunächst auf Arbeiten im Zusammenhang mit der Leistungsoptimierung achten und diese in das gesamte Produktdesign und die gesamte Produktentwicklung integrieren müssen. Zweitens geht es darum, den leistungsbezogenen Inhalt zu verstehen und natürlich eine Leistungsoptimierung während des Projektentwicklungsprozesses durchzuführen. Und schließlich und das Wichtigste: Beginnen Sie jetzt mit der Optimierung.

Es wird empfohlen, dass Sie den zuvor von Qiwu Weekly empfohlenen Artikel „Hey, ich gebe Ihnen eine Web-Performance-Optimierungskarte“ 1 lesen, der Ihnen dabei helfen kann, ein Gesamtkonzept darüber zu entwickeln, was getan werden muss und welche Probleme anstehen zur Leistungsoptimierung berücksichtigt werden
.
In diesem Artikel werden die Techniken zur CSS-Leistungsoptimierung ausführlich vorgestellt. Der Autor unterteilt sie in zwei Kategorien: praktisch und empfohlen, mit insgesamt 8 Tipps. Praktische Techniken können in Projekten schnell angewendet werden und können die Leistung erheblich verbessern. Sie werden auch häufig vom Autor verwendet. Es wird empfohlen, sie so schnell wie möglich in Projekten zu üben. Einige der vorgeschlagenen Techniken haben möglicherweise keinen wesentlichen Einfluss auf die Leistung und andere werden möglicherweise nicht von jedem verwendet, sodass ich mich nicht auf sie konzentrieren kann. Die Leser können sie anhand ihrer eigenen Situation kennenlernen. (Lernvideo-Sharing: CSS-Video-Tutorial)

Vor dem offiziellen Start müssen Sie ein gewisses Verständnis für das Funktionsprinzip von Browser 2 haben. Freunde, die es benötigen, können es zunächst kurz verstehen.

Jetzt stellen wir vier praktische Optimierungstechniken vor, beginnend mit dem wichtigsten CSS des ersten Bildschirms. 1. Kritisches Inline-CSS für den ersten Bildschirm erscheint auf dem Bildschirm. Dieser Indikator beeinflusst die Zeit, die Benutzer warten müssen, bevor sie die Seite sehen, und kritisches Inline-CSS (kritisches CSS, das auf dem ersten Bildschirm als kritisches CSS bezeichnet werden kann) kann diese Zeit verkürzen.

Jeder sollte daran gewöhnt sein, über den Link-Tag auf externe CSS-Dateien zu verweisen. Was Sie jedoch wissen müssen, ist, dass das direkte Einbetten des CSS in das HTML-Dokument den CSS-Download beschleunigt. Wenn Sie externe CSS-Dateien verwenden, müssen Sie die CSS-Dateien kennen, auf die nach dem Herunterladen des HTML-Dokuments verwiesen werden soll, und diese dann herunterladen. Daher kann Inline-CSS dafür sorgen, dass die Startseite des Browsers früher gerendert wird, da sie gerendert werden kann, nachdem der HTML-Download abgeschlossen ist.

Kann das gesamte CSS inline sein, da Inline-CSS die Startzeit des Seitenrenderings vorverlegen kann? Die Antwort lautet offensichtlich nein, diese Methode eignet sich nicht zum Inlining größerer CSS-Dateien. Da das anfängliche Überlastungsfenster 3 begrenzt ist (TCP-bezogenes Konzept, normalerweise 14,6 KB, komprimierte Größe), muss das System weitere Runden zwischen dem Server und dem Browser durchführen, wenn die Datei nach dem Inline-CSS diese Grenze überschreitet Trip, dadurch verlängert sich die Seitenrenderingzeit nicht. Daher sollten wir nur das kritische CSS, das zum Rendern von „above-the-fold“-Inhalten erforderlich ist, in den HTML-Code integrieren.

Da wir nun wissen, dass das Einbetten des Schlüssel-CSS über dem ersten Bildschirm die Leistung optimieren kann, besteht der nächste Schritt darin, den Schlüssel-CSS über dem ersten Bildschirm zu bestimmen. Offensichtlich müssen wir nicht manuell bestimmen, welcher Inhalt sich im kritischen CSS befindet. Auf Github gibt es ein Projekt namens Critical CSS4, das die zum ersten Bildschirm gehörenden Schlüsselstile extrahieren kann. Sie können sich das Projekt ansehen und es mit Ihren eigenen Build-Tools verwenden. Um die Richtigkeit sicherzustellen, ist es natürlich am besten, wenn Sie persönlich bestätigen, ob der extrahierte Inhalt fehlt. Allerdings gibt es einen Nachteil von Inline-CSS. Das Inline-CSS wird nicht zwischengespeichert und jedes Mal neu heruntergeladen. Wenn wir jedoch, wie oben erwähnt, die Inline-Dateigröße auf 14,6 KB beschränken, scheint dies kein großes Problem zu sein.

Wie oben haben wir erklärt, warum wichtiges CSS eingebunden werden sollte und wie man es einfügt. Wie gehen wir also mit dem verbleibenden CSS um? Es wird empfohlen, externes CSS zu verwenden, um das verbleibende CSS einzuführen, was neben dem asynchronen Laden auch das Caching ermöglicht.

2. Das asynchrone Laden von CSS

CSS blockiert das Rendern von verarbeiteten Inhalten, bis die CSS-Dateianforderung, der Download und die Analyse abgeschlossen sind. Manchmal ist diese Blockierung notwendig, weil wir nicht möchten, dass der Browser mit dem Rendern der Seite beginnt, bevor das erforderliche CSS geladen ist. Nachdem das Schlüssel-CSS des ersten Bildschirms eingebunden wurde, ist das Blockieren des Renderns des verbleibenden CSS-Inhalts nicht erforderlich. Externes CSS kann verwendet und asynchron geladen werden.

Wie implementiert man also das asynchrone Laden von CSS? Es gibt die folgenden vier Möglichkeiten, das asynchrone Laden von CSS durch den Browser zu implementieren
.
Die erste Möglichkeit besteht darin, mithilfe von JavaScript dynamisch ein Stylesheet-Link-Element zu erstellen und es in das DOM einzufügen.

// 创建link标签
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );

Die zweite Möglichkeit besteht darin, das Attribut media des Link-Elements auf einen Medientyp (oder eine Medienabfrage) zu setzen, mit dem der Browser des Benutzers nicht übereinstimmt, z. B. media="print", oder sogar überhaupt nicht -existent Typ media = „noexist“. Wenn das Stylesheet für den Browser nicht für den aktuellen Medientyp geeignet ist, wird seine Priorität herabgesetzt und es wird heruntergeladen, ohne dass die Seitenwiedergabe blockiert wird.

Natürlich dient dies nur dazu, das asynchrone Laden von CSS zu erreichen. Vergessen Sie nicht, den Wert von „media“ auf „screen“ oder „all“ zu setzen, nachdem die Datei geladen wurde, damit der Browser mit der Analyse des CSS beginnt.

<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media=&#39;all&#39;">

Ähnlich wie bei der zweiten Methode können wir das Link-Element auch über das rel-Attribut als alternatives optionales Stylesheet markieren, wodurch auch ein asynchrones Laden durch den Browser erreicht werden kann. Vergessen Sie auch nicht, rel nach Abschluss des Ladevorgangs wieder zu ändern.

<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel=&#39;stylesheet&#39;">

Die oben genannten drei Methoden sind alle relativ alt. Nun zeigt der Webstandard rel="preload"5, wie Ressourcen, einschließlich CSS-ähnlicher Ressourcen, asynchron geladen werden.

<link rel="preload" href="mystyles.css" as="style" onload="this.rel=&#39;stylesheet&#39;">

Hinweis, wie erforderlich. Das Ignorieren des as-Attributs oder das falsche as-Attribut führt dazu, dass das Vorladen einer XHR-Anfrage entspricht. Der Browser weiß nicht, welcher Inhalt geladen wird, sodass die Ladepriorität solcher Ressourcen sehr niedrig ist. Die optionalen Werte von as können auf die oben genannten Standarddokumente verweisen.

Es scheint, dass sich die Verwendung von rel="preload" nicht von den beiden oben genannten unterscheidet. Beide ändern bestimmte Attribute, damit der Browser die CSS-Datei asynchron lädt, sie jedoch erst analysiert, wenn der Ladevorgang abgeschlossen ist und die Änderungen wiederhergestellt sind. und dann beginnt das Parsen.

Aber es gibt tatsächlich einen sehr wichtigen Unterschied zwischen ihnen, nämlich dass die Verwendung von Preload früher mit dem Laden von CSS beginnen kann als die Verwendung der nicht übereinstimmenden Medienmethode. Obwohl die Unterstützung für diesen Standard noch nicht vollständig ist, wird daher dennoch empfohlen, diese Methode vorrangig zu verwenden.
Dieser Standard ist jetzt ein Kandidatenstandard und ich glaube, dass Browser ihn nach und nach unterstützen werden. Die Unterstützung jedes Browsers ist in der folgenden Abbildung dargestellt.

3. Dateikomprimierung

Eine der einfachsten und am häufigsten verwendeten Methoden zur Leistungsoptimierung ist die Dateikomprimierung.
Die Größe der Datei wirkt sich direkt auf die Ladegeschwindigkeit des Browsers aus, was besonders deutlich wird, wenn das Netzwerk schlecht ist. Ich glaube, dass jeder bereits daran gewöhnt ist, CSS zu komprimieren. Heutige Konstruktionstools wie Webpack, Gulp/Grunt, Rollup usw. unterstützen auch die CSS-Komprimierungsfunktion. Die komprimierte Datei kann erheblich reduziert werden, was die Ladezeit des Browsers erheblich verkürzen kann.

4. Entfernen Sie nutzloses CSS

Obwohl die Dateikomprimierung die Dateigröße reduzieren kann. Bei der Komprimierung von CSS-Dateien werden jedoch normalerweise nur unnötige Leerzeichen entfernt, was die Komprimierungsrate von CSS-Dateien begrenzt. Gibt es andere Möglichkeiten, CSS zu optimieren? Die Antwort lautet offensichtlich: Ja. Wenn die komprimierte Datei immer noch die erwartete Größe überschreitet, können wir versuchen, das nutzlose CSS im Code zu finden und zu entfernen.

Im Allgemeinen gibt es zwei Arten von nutzlosem CSS-Code: Der eine ist wiederholter Code in verschiedenen Elementen oder anderen Situationen und der andere ist CSS-Code, der nicht auf der gesamten Seite wirksam wird. Für Ersteres sollten wir beim Schreiben von Code so viele öffentliche Klassen wie möglich extrahieren, um Duplikate zu reduzieren. Bei letzterem wird bei der Codepflege durch verschiedene Entwickler immer CSS-Code generiert, der nicht mehr verwendet wird. Dieses Problem kann natürlich auch auftreten, wenn eine Person ihn schreibt. Diese nutzlosen CSS-Codes erhöhen nicht nur das Downloadvolumen des Browsers, sondern verlängern auch die Analysezeit des Browsers, was eine enorme Leistungseinbuße darstellt. Deshalb müssen wir diese nutzlosen Codes finden und entfernen.

Natürlich ist es sehr ineffizient, diese nutzlosen CSS manuell zu löschen. Wir können dies mit Hilfe der Uncss7-Bibliothek tun. Uncss kann verwendet werden, um nutzloses CSS aus Stylesheets zu entfernen, und unterstützt Multi-File- und JavaScript-injiziertes CSS.

Wir haben bereits über die vier praktischen Optimierungstechniken gesprochen. Jetzt stellen wir die vier vorgeschlagenen Techniken vor.

1. Verwenden Sie Selektoren selektiv

Die meisten Freunde sollten wissen, dass der CSS-Selektorabgleich von rechts nach links erfolgt. Diese Strategie führt zu Leistungsunterschieden zwischen verschiedenen Selektortypen. Im Vergleich zu #markdown-content-h3 benötigt der Browser bei Verwendung von #markdown .content h3 offensichtlich mehr Zeit, um den Renderbaum zu generieren. Denn letzteres muss zuerst alle h3-Elemente im DOM finden, dann die Vorfahrenelemente herausfiltern, die nicht .content sind, und schließlich die Vorfahren von .content herausfiltern, die nicht #markdown sind. Stellen Sie sich vor: Wenn die Seite mehr Verschachtelungsebenen und mehr Elemente enthält, ist der Zeitaufwand für den Abgleich natürlich höher.

Moderne Browser haben in dieser Hinsicht jedoch viele Optimierungen vorgenommen, und der Leistungsunterschied zwischen verschiedenen Selektoren ist nicht offensichtlich oder sogar sehr unterschiedlich. Darüber hinaus ist die Leistung verschiedener Selektoren in verschiedenen Browsern nicht völlig einheitlich und es ist unmöglich, beim Schreiben von CSS jeden Browser zu berücksichtigen. Aus diesen beiden Gründen müssen wir uns bei der Verwendung des Selektors nur an die folgenden Punkte erinnern, und der Rest kann vollständig von unseren Vorlieben abhängen.

• Halten Sie es einfach und verwenden Sie keine übermäßig komplexen Selektoren, die zu stark verschachtelt sind.

• Platzhalter und Attributselektoren sind am wenigsten effizient und erfordern die am besten passenden Elemente. Vermeiden Sie daher deren Verwendung.

• Verwenden Sie keine Klassenselektoren und ID-Selektoren, um Element-Tags wie h3#markdown-content zu ändern. Dies ist unnötig und verringert die Effizienz.

• Gib im Streben nach Geschwindigkeit nicht die Lesbarkeit und Wartbarkeit auf.

Wenn Sie noch Fragen zu den oben genannten Punkten haben, empfiehlt der Autor, eine der folgenden CSS-Methoden (BEM9, OOCSS10, SUIT11, SMACSS12, ITCSS13, Enduring CSS14 usw.) als CSS-Schreibspezifikation zu wählen. Die Verwendung einer einheitlichen Methodik kann jedem helfen, einen einheitlichen Stil zu entwickeln, Namenskonflikte zu reduzieren und die oben genannten Probleme zu vermeiden. Kurz gesagt, es gibt viele Vorteile. Wenn Sie sie noch nicht verwendet haben, beginnen Sie schnell damit.

Tipps: Warum stimmen CSS-Selektoren von rechts nach links überein?

Weitere Selektoren in CSS stimmen nicht überein. Wenn Sie also Leistungsprobleme berücksichtigen, müssen Sie überlegen, wie Sie die Effizienz verbessern können, wenn die Selektoren nicht übereinstimmen. Um diesen Zweck zu erreichen, kann diese Strategie den CSS-Selektor effizienter machen, wenn er nicht übereinstimmt. Wenn man es so betrachtet, ist es sinnvoll, beim Matching mehr Leistung zu verbrauchen.

2. Reduzieren Sie die Verwendung teurer Attribute

Wenn der Browser den Bildschirm zeichnet, sind alle Attribute, die der Browser zum Betrieb oder Berechnen benötigt, relativ teuer. Wenn Seiten neu gezeichnet werden, verringern sie die Renderleistung des Browsers. Daher sollten wir beim Schreiben von CSS versuchen, die Verwendung teurer Eigenschaften wie box-shadow/border-radius/filter/transparency/:nth-child usw. zu reduzieren.

Das bedeutet natürlich nicht, dass nicht jeder diese Attribute verwenden sollte, denn es sollten Attribute sein, die wir häufig verwenden. Der Grund, warum ich dies erwähne, besteht darin, dass jeder es verstehen kann. Wenn zwei Optionen zur Auswahl stehen, können Sie der Option ohne oder mit weniger teuren Attributen den Vorrang geben. Wenn Sie diese Wahl jedes Mal treffen, wird die Leistung der Website unbewusst verbessert.

3. Reflow optimieren und neu zeichnen

Während der Nutzung der Website führen bestimmte Vorgänge zu Stiländerungen. Zu diesem Zeitpunkt muss der Browser diese Änderungen erkennen und erneut rendern. viele. Wir alle wissen, dass sich Benutzer bei der Nutzung der Website wohl fühlen, wenn die FPS 60 beträgt. Das bedeutet, dass wir alle mit jedem Rendering verbundenen Vorgänge innerhalb von 16,67 ms abschließen müssen, also müssen wir versuchen, teurere Vorgänge zu minimieren.

3.1 Reflow reduzieren

Reflow führt dazu, dass der Browser das gesamte Dokument neu berechnet und den Rendering-Baum neu aufbaut. Dieser Vorgang verringert die Rendering-Geschwindigkeit des Browsers. Wie unten gezeigt, gibt es viele Vorgänge, die eine Neuplanung auslösen, und wir sollten vermeiden, diese Vorgänge häufig auszulösen.

• Ändern Sie Schriftgröße und Schriftfamilie.

• Ändern Sie die inneren und äußeren Ränder des Elements JS (wie Breite/Höhe/Links usw.)

• CSS-Pseudoklassenaktivierung

• Scrollen Sie mit der Bildlaufleiste oder ändern Sie die Fenstergröße

• Darüber hinaus können wir auch abfragen, welche Eigenschaften ausgelöst werden Reflow und Neuzeichnen über CSS Trigger15.

Es ist erwähnenswert, dass einige CSS-Eigenschaften eine bessere Reflow-Leistung aufweisen. Wenn Sie beispielsweise Flex verwenden, ist der Reflow schneller als bei der Verwendung von Inline-Block und Float, sodass Flex beim Layout Vorrang eingeräumt werden kann.

• 3.2 Vermeiden Sie unnötiges Neuzeichnen

Wenn sich das Erscheinungsbild eines Elements (wie Farbe, Hintergrund, Sichtbarkeit und andere Attribute) ändert, wird ein Neuzeichnen ausgelöst. Während der Nutzung der Website ist eine Neugestaltung unvermeidlich. Der Browser hat dies jedoch optimiert und führt mehrere Reflow- und Redraw-Vorgänge in einer Ausführung zusammen. Wir müssen jedoch weiterhin unnötige Neuzeichnungen vermeiden, wie z. B. das Hover-Ereignis, das beim Scrollen der Seite ausgelöst wird. Sie können das Hover-Ereignis beim Scrollen deaktivieren, damit die Seite reibungsloser scrollt.

Darüber hinaus schreiben wir immer mehr Animationscodes in CSS und sind es gewohnt, Animationen zu verwenden, um die Benutzererfahrung zu verbessern. Wenn wir Animationen schreiben, sollten wir uns auch auf den oben genannten Inhalt beziehen, um das Auslösen von Neuzeichnungen und Neuanordnungen zu reduzieren. Darüber hinaus können wir die Animationsleistung durch Hardwarebeschleunigung 16 und will-change17 verbessern. Interessierte Freunde können auf den Link klicken, um ihn anzuzeigen.

Abschließend ist zu beachten, dass das Gerät des Benutzers möglicherweise nicht so gut ist, wie es sich vorgestellt hat, zumindest nicht so gut wie unsere Entwicklungsmaschine. Wir können die Entwicklertools von Chrome verwenden, um die CPU zu verlangsamen und dann entsprechende Tests durchzuführen. Wenn Sie auf der mobilen Seite darauf zugreifen müssen, ist es am besten, die Geschwindigkeitsbegrenzung niedriger einzustellen, da die Leistung auf der mobilen Seite oft schlechter ist .

4. Verwenden Sie nicht @import

Verwenden Sie schließlich nicht @import, um CSS einzuführen, ich glaube, es wird selten von allen verwendet.

Es wird hauptsächlich aus den folgenden zwei Gründen nicht empfohlen, @import zu verwenden.

Zuallererst wirkt sich die Verwendung von @import zur Einführung von CSS auf den parallelen Download des Browsers aus. Die mit @import referenzierte CSS-Datei erkennt erst, dass eine weitere CSS-Datei heruntergeladen und analysiert werden muss, nachdem die CSS-Datei, die auf sie verweist, heruntergeladen wurde. Dann wird sie heruntergeladen und dann mit dem Parsen, dem Erstellen eines Renderbaums usw. begonnen. nach dem Herunterladen. Eine Reihe von Vorgängen. Dies führt dazu, dass der Browser die erforderlichen Stildateien nicht parallel herunterladen kann.

Zweitens führen mehrere @Importe dazu, dass die Download-Reihenfolge gestört wird. Im IE führt @import dazu, dass die Download-Reihenfolge der Ressourcendateien unterbrochen wird. Das heißt, die hinter @import aufgelisteten js-Dateien werden vor @import heruntergeladen und stören oder zerstören den parallelen Download von @import selbst.

Verwenden Sie also nicht diese Methode, sondern verwenden Sie einfach den Link-Tag.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmierlehre! !

Das obige ist der detaillierte Inhalt von8 wissenswerte Tipps zur CSS-Leistungsoptimierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!