Komprimieren von CSS: Ein leistungsstarkes Tool zur Verbesserung der Website -Geschwindigkeit

Kernpunkte:

• CSS -Komprimierung reduziert die Dateigr??e, indem sie redundante Codes Zeichen entfernen, wodurch Downloads beschleunigt und die Datenübertragung gespeichert werden.
• CSS Optimizer (CSSO) ist ein Knoten.JS-basiertes Komprimierungswerkzeug, das mit der Befehlszeilenschnittstelle vertraut werden muss.
• CSSO entfernt nicht nur unn?tige R?ume, Semikolons und Kommentare, sondern optimiert auch, indem er Deklarationsbl?cke mit doppelten Selektoren zusammennimmt, überschriebene Attribute l?scht und Farbcodes verkürzt.
• W?hrend das Komprimieren von CSS die Website der Website verbessern kann, kann der Code auch das Lesen und Debuggen erschweren. Daher wird empfohlen, die ursprünglichen unkomprimierten CSS -Dateien für Entwicklungszwecke zu halten.

(Das Folgende wird aus dem von Tiffany Brown geschriebenen Buch "The Master of CSS" ausgehalten. Das Buch ist weltweit erh?ltlich und Sie k?nnen die E-Book-Version hier auch kaufen.)

Entwicklertools k?nnen Ihnen helfen, Rendering -Probleme zu finden und zu beheben, aber wie effizient ist es? Wurde unsere Dateigr??e minimiert? Dazu brauchen wir Komprimierungswerkzeuge.

im Kontext von CSS bedeutet Komprimierung einfach das Entfernen von überschüssigen Zeichen. Betrachten Sie beispielsweise den folgenden Codeblock:

<code>h1 {
    font: 16px / 1.5 'Helvetica Neue', arial, sans-serif;
    width: 80%;
    margin: 10px auto 0px;
}</code>

Dieser Code enth?lt Zeilenpausen und Leerzeichen sowie 98 Bytes. Schauen wir uns das komprimierte Beispiel an:

<code>h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;margin:10px auto 0}</code>

Jetzt ist unser CSS nur 80 Bytes lang, ein Rückgang von 18%. Je weniger Bytes, desto schneller die Download -Geschwindigkeit und je weniger Daten Sie und Ihre Benutzer übertragen.

In diesem Abschnitt werden wir CSS Optimizer (CSSO), ein Knoten.JS-basiertes Komprimierungswerkzeug vorstellen. Um CSSO zu installieren, müssen Sie zuerst Node.js und NPM installieren. NPM ist als Teil des Installationsprozesses von Node.js installiert, sodass Sie nur ein Paket installieren müssen.

Mit CSSO müssen Sie mit der Befehlszeilenschnittstelle vertraut sein. Linux- und OS X -Benutzer k?nnen Terminalanwendungen verwenden (für OS X, Anwendungen & GT; Terminalanwendungen). Wenn Sie Windows verwenden, verwenden Sie die Eingabeaufforderung. Gehen Sie zum Start- oder Windows -Menü und geben Sie CMD in das Suchfeld ein.

CSSO

Nach dem Einrichten von Node.js und NPM k?nnen Sie CSSO installieren. Geben Sie in der Befehlszeile Eingabeaufforderung:

npm install -g csso -g Flags, um CSSO global zu installieren, damit wir es in der Befehlszeile verwenden k?nnen. OS X- und Linux -Benutzer müssen m?glicherweise sudo (sudo npm install -g csso) verwenden. Wenn NPM seinen Installationspfad zum Befehlszeilenfenster druckt und die Befehlszeile Eingabeaufforderung wieder auftaucht, wissen Sie, dass er erfolgreich installiert wurde, wie in Abbildung 3.25 gezeigt.

komprimieren Sie mit CSSO

Um die CSS -Datei zu komprimieren, den Befehl cSSO ausführen und den Dateinamen als Parameter übergeben:

csso style.css Dies führt eine grundlegende Komprimierung durch. CSSO entfernt unn?tige R?ume, zus?tzliche Semikolons und Kommentare in CSS -Eingabedateien.

Nach Abschluss druckt CSSO das optimierte CSS auf Standardausgabe, d. H. Das aktuelle Terminal- oder Eingabeaufforderungfenster. In den meisten F?llen m?chten wir diese Ausgabe jedoch in einer Datei speichern. übergeben Sie dazu den zweiten Parameter an CSSO, den Namen der komprimierten Datei. Wenn wir beispielsweise die komprimierte Version von style.css als style.min.css speichern m?chten, verwenden wir den folgenden Befehl:

csso style.css style.min.css standardm??ig ordnet CSSO Teile von CSS um. Beispielsweise verschmelzen es Deklarationsbl?cke mit doppelten Selektoren und entfernt einige überschriebene Attribute. Betrachten Sie das folgende CSS:

body { margin: 20px 30px; padding: 100px; margin-left: 0px; }

h1 { font: 200 36px / 1.5 sans-serif; }

h1 { color: #ff6600; }

in diesem Codesegment überschreibt margin-left die vorherige margin -DEklaration. Wir haben auch h1 als Selektor für kontinuierliche Deklarationsbl?cke wiederverwendet. Nach der Optimierung und Komprimierung erhalten wir:

<code>h1 {
    font: 16px / 1.5 'Helvetica Neue', arial, sans-serif;
    width: 80%;
    margin: 10px auto 0px;
}</code>

cSSO l?scht unn?tige R?ume, Newlines und Semikolons und verkürzt #ff6600 zu #f60. CSSO fusioniert auch die Eigenschaften margin und margin-left in eine Deklaration (margin: 20px 30px 20px 0) und kombiniert unsere separaten h1 -Auskündigungsbl?cke in eine. Wenn Sie jetzt bezweifeln, wie CSSO Ihre CSS umschreiben wird, k?nnen Sie seine Refactoring -Funktion deaktivieren. Verwenden Sie einfach das Logo --restructure-off oder -off. Zum Beispiel wird das Ausführen von csso style.css style.min.css -off die folgenden Ergebnisse erhalten:

<code>h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;margin:10px auto 0}</code>

Jetzt ist unser CSS komprimiert, aber nicht optimiert. Durch Deaktivieren von Refactoring wird verhindert, dass Ihre CSS -Datei die Mindestgr??e erreicht. Vermeiden Sie das Deaktivieren von Refactoring, es sei denn, Sie sto?en auf Probleme. Der in Kapitel 9 eingeführte Pr?prozessor bietet Kompressionsfunktionen in seinem Werkzeugsatz.

H?ufig gestellte Fragen zur Verwendung von CSS -Optimierer zur Komprimierung von CSS

Welche Bedeutung hat die Komprimierung von CSS in der Webentwicklung?

CSS -Komprimieren ist ein wichtiger Aspekt der Webentwicklung, da es dazu beitr?gt, die Gr??e von CSS -Dateien zu verringern. Eine reduzierte Dateigr??e führt zu einem schnelleren Laden der Website und bietet somit eine bessere Benutzererfahrung. Die komprimierte CSS -Datei beseitigt unn?tige Zeichen wie Leerzeichen, Zeilenpausen und Kommentare, die die Funktionalit?t des Codes nicht beeinflussen. Dieser Prozess kann die Leistung der Website erheblich verbessern, insbesondere für Benutzer mit langsameren Internetverbindungen.

Wie funktioniert CSS -Optimierer?

CSS -Optimierer funktioniert, indem Sie Ihren CSS -Code analysieren und unn?tige Zeichen und Redundanz entfernen. Es komprimiert CSS -Dateien, indem es Leerzeichen, Zeilenpausen und Kommentare beseitigt und die Codestruktur vereinfacht. Dies führt zu kleineren Dateigr??en und schnelleren Downloads des Webbrowsers, wodurch die Gesamtleistung der Website verbessert wird.

Was sind die Risiken des Komprimierens von CSS?

W?hrend das Komprimieren von CSS die Leistung Ihrer Website erheblich verbessern kann, sollte beachtet werden, dass der Code auch schwieriger zu lesen und zu debuggen kann. Dies liegt daran, dass der Prozess alle Formate und Kommentare entfernt, die den Code leicht zu lesen machen. Daher wird empfohlen, die ursprünglichen unkomprimierten CSS -Dateien für das Debuggen und die Entwicklung beizubehalten.

Kann ich CSS manuell komprimieren?

Ja, Sie k?nnen CSS manuell komprimieren, indem Sie alle unn?tigen Zeichen entfernen und den Code vereinfachen. Dieser Prozess kann jedoch sehr zeitaufw?ndig und fehleranf?llig sein, insbesondere für gr??ere CSS-Dateien. Dieser Vorgang kann mithilfe von Tools wie CSS -Optimierer automatisiert werden, um sicherzustellen, dass Ihr CSS genau und effizient komprimiert wird.

Wie kann ich CSS -Optimierer verwenden?

Um den CSS -Optimierer zu verwenden, fügen Sie den CSS -Code einfach in das Eingangsfeld auf der CSS -Optimierer -Website ein und klicken auf die Schaltfl?che "Optimierer". Das Tool analysiert dann Ihren Code und bietet Ihnen eine komprimierte Version, die Sie auf Ihrer Website kopieren und verwenden k?nnen.

Wirkt sich die Komprimierung von CSS auf die Funktionalit?t meiner Website aus?

Nein, das Komprimieren von CSS wirkt sich nicht auf die Funktionalit?t Ihrer Website aus. Der Prozess beseitigt nur unn?tige Zeichen und vereinfacht den Code, ?ndert jedoch nicht die Art und Weise, wie der Browser die CSS -Regeln interpretiert. Daher bleibt das Aussehen und die Funktionalit?t Ihrer Website gleich, laden jedoch aufgrund der kleineren Dateigr??e schneller.

Kann ich CSS -Optimierer für gro?e CSS -Dateien verwenden?

Ja, CSS -Optimierer kann gro?e CSS -Dateien verarbeiten. Je gr??er die Datei, desto l?nger dauert es, bis das Tool den Code analysiert und komprimiert. Bei gro?en CSS -Dateien ist die Verwendung von CSS -Optimierer jedoch immer noch effizienter und genauer, als zu versuchen, den Code manuell zu komprimieren.

Ist CSS -Optimierer frei zu bedienen?

Ja, CSS -Optimierer ist ein kostenloses Tool, mit dem Sie den CSS -Code komprimieren k?nnen. Es ist ein webbasiertes Tool, sodass Sie nichts herunterladen oder installieren müssen, um es zu verwenden. Sie müssen nur die CSS -Optimierer -Website besuchen, Ihren CSS -Code einfügen und eine komprimierte Version erhalten.

Kann ich diesen Prozess umkehren, wenn ich das CSS ?ndern muss?

Ja, Sie k?nnen diesen Vorgang mit der ursprünglichen unkomprimierten CSS -Datei umkehren. Aus diesem Grund wird empfohlen, eine Kopie der ursprünglichen CSS -Datei vor dem Komprimieren zu führen. Wenn Sie den Code ?ndern oder debuggen müssen, k?nnen Sie die Originaldatei verwenden und ihn dann erneut komprimieren, wenn Sie fertig sind.

Welche anderen Praktiken kann ich mit der CSS -Komprimierung kombinieren, um die Leistung meiner Website zu verbessern?

Zus?tzlich zum Komprimieren von CSS k?nnen Sie auch HTML- und JavaScript -Dateien komprimieren. Dies kann die Ladezeit der Website weiter verkürzen. Weitere Praktiken umfassen die Optimierung von Bildern, die Verwendung von Content Distribution Networks (CDNs), die Erm?glichung der Komprimierung und die Implementierung des Browser -Caching. Diese Praktiken in Kombination mit der CSS -Komprimierung k?nnen die Leistung und Benutzererfahrung Ihrer Website erheblich verbessern.

Das obige ist der detaillierte Inhalt vonMinimieren von CSS mit CSS -Optimierer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!