2011-01-04 7 views
8

Ich weiß, es gibt mehrere Werkzeuge gibt, die von Verschleiern von JavaScript-Dateien fähig sind, wie zum Beispiel durch eine einfache Funktionen wie das Drehen:Verkleinerungs und Obsfucating CSS ähnlich wie Javascript

function testing() 
{ 
    var testing; 
    var testing2; 
    alert(testing+testing2); 
} 

in

function a(var a,b;alert(a+b);) 

Meine Frage: Gibt es so etwas für die Verwendung mit CSS/HTML (oder gibt es ein Werkzeug, das einen ähnlichen Effekt hat)? Insbesondere ein Minifikations-/Verschleierungstool, das Variablen und Referenzen umbenennt und zusätzlichen Leerraum etc. eliminiert.

Und wenn ja - würden die Vorteile in der Leistung die Lesbarkeit sowohl bei der CSS/HTML/JavaScript-Verkleinerung/Verschleierung überwiegen?

+0

Sicher, wenn Sie etwas verkleinern, werfen Sie Lesbarkeit aus dem Fenster vollständig! –

+0

Ich stimme zu - Ich frage mich nur, ob die Vorteile der Verschleierung die Steigerungen (wenn überhaupt) in der Leistung wert sind. –

+0

Ich denke, der einzige Vorteil ist, dass die Datei kleiner ist, also Ihre Einsparungsbandbreite, wenn Sie dies täglich an tausende Benutzeragenten weitergeben. –

Antwort

9

Es ist sehr schwierig, HTML oder CSS zu "verkleinern", da alles, was sicher gespeichert werden kann, Leerraum ist (was nicht zu einer großen Einsparung führt). Wie bei der Klassenumbenennung verlieren Sie einen wichtigen Teil des Webs, der einen semantischen Code hat (der eine Bedeutung darstellt). Ich denke, die beste Option ist sicherzustellen, dass Sie die gzip-Komprimierung auf Ihrem Webserver aktiviert haben und sich darauf konzentrieren, Ihre Assets möglichst in einer einzigen Datei zu kombinieren.

+0

Danke Kevin - Ich habe mich nur gefragt, ob es irgendwelche Tools gibt, die bei der Durchführung einer solchen Aufgabe behilflich sind (eigentlich eine CSS-Datei zu verschleiern und dann den eigentlichen HTML-Code zu ändern), da ich sicher bin, dass einige Anal-Designer da draußen sind Ich will keine Chance, dass ihre Arbeit "wiederverwendet" wird. –

+19

Jeder "Webentwickler", der glaubt, dass seine Arbeit vor Wiederverwendung geschützt sein sollte, ist des Titels unwürdig. – zzzzBov

+0

+1 für Ihren Kommentar zzzzBov. :) –

2

Der YUI Compressor minifies CSS, aber ich bin mir nicht sicher, wie groß ein Gewinn es über einfache Gzip-Komprimierung sein könnte. Wenn Sie so viel CSS haben, könnte dies ein Warnsignal für größere Probleme sein.

+0

Danke Hank - Ich hatte mir den YUI Compressor schon einmal angesehen - da ich glaube, dass er "CSS so gut wie möglich reduziert" (entfernt alles Leerzeichen). Ich wollte nur sehen, ob es Ähnlichkeiten mit den Werkzeugen im JavaScript-Stil gibt. (Oh und mach dir keine Sorgen - das wurde nicht aufgrund eines Problems, mehr von Neugier gefragt) –

+0

Hank - wenn Sie an einem großen Projekt arbeiten (vor allem in einer Unternehmensumgebung) ist es üblich, eine Vielzahl von CSS-Dateien zu finden Minimierung erforderlich, um die Auswirkungen auf die Website zu reduzieren. Ich habe ein paar große Unternehmen gesehen, die YUI Compressor verwenden, um mit der CSS-Minification umzugehen. Aber die Obfuscation ist ... nicht so sehr. – calvinf

+0

@calvinf Ich bin mir sicher, dass es Ausnahmen von der Regel gibt, aber die meisten Websites sollten wirklich keine großen Mengen an CSS benötigen. Auch wenn Sie eine Menge CSS benötigen, wie viele KB müssen Sie damit anfangen, dass ein CSS-Minifier einen wesentlichen Einfluss hat? Würden sie nicht alle zu einer einzigen Datei verketten, Caching-Optimierungen und GZip-Komprimierung, die alle eine viel größere Wirkung haben? –

1

Werfen Sie einen Blick auf diese: minifycss

Was Verschleierung Ich bin nicht sicher, dass dies eine gute Idee. Die CSS-Klassen können überall manipuliert werden. In dem Moment, in dem Sie das CSS ändern, verlieren Sie den Link zu den Klassen/IDs usw.

0

Werfen Sie einen Blick auf html5boilerplate.com; speziell den neuesten Quellcode auf GitHub.

HTML5Boilerplate Build-Skript kann minimieren JavaScript, CSS und HTML für Sie. Es wird Ihre CSS-Selektoren nicht umbenennen, aber es ist wahrscheinlich am nächsten zu einem automatisierten "Obfuscator", den Sie finden.


Wenn Sie gerade schauen, um einige zusätzliche Bytes von jeder Seite eek stellen Sie sicher, gzip/deflate Kompression verwenden, und versuchen Sie dann Ihre CSS-Selektor Eigenschaften alphabetisiert und Ihre HTML-Element-Attribute und deren Werte.

Read this für Google detaillierte Empfehlungen zu der oben genannten Methode.


In einigen dynamischen Sprachen mit HTML-Helfern (wie asp.net/C#) Sie können die HTML-Kontrolle der „ClientID“ Methode überschreiben eine zufällige Zeichenfolge zu sein und Ihre CSS-Selektoren dynamisch auf Ihre HTML-Link (na ja, die serverseitigen Steuerelemente, die HTML rendern. Aber das wäre für eine andere Frage völlig und ist wahrscheinlich nicht das, was Sie suchen. Es würde auch ein Wartungsalbtraum werden.


0

Wenn Sie Ruby-verwenden, hier ist ein Ruby CSS Minifier, die ich für eine gute Wirkung verwenden. Angesichts meines bereits knappen Stils kann ich meine Dateigröße um 15% reduzieren.

Zum Beispiel in einem Projekt das Aggregat von 5 Dateien bei 32.3kiB wird 1 Datei von 26,4kB (18%). Bei einem anderen Projekt werden 2 Dateien von 21,6kB zu 1 Datei von 19,0kB (12%).

9

HTML Muncher ist ein Python-Tool, das versucht, IDs und CSS-Klassennamen in HTML-, JavaScript- und CSS-Dateien umzubenennen. Sie können es als ersten Schritt in Ihrem Optimierungsprozess verwenden, bevor Sie die Dateien an andere Tools wie Google Closure Compiler oder YUI CSS Compressor übergeben.

+0

HTML Muncher ist ein großartiges Werkzeug. Die Einsparungen sind jedoch nie groß, wenn Sie bereits gzip verwenden. Original = 148k - ** Minify + gzip = 17929 v. Munched + Minify + gzip = 15905 ** - eine Ersparnis von ungefähr 2k für eine Menge Arbeit – CalM

+0

Konto diese 2kb für Millionen von Seitenaufrufen, und es wird einen Unterschied machen :) –

-1

Es gibt viele Online-Tools, die Sie für Dinge wie CSS-Minification verwenden können. Hier ist ein online css minifier! Ich fand.

Wie zum Umbenennen von CSS-Klassen, würde ich versuchen, dies zu vermeiden, wie Sie eine Menge der Lesbarkeit von Ihrem HTML verlieren.

-3

Ich habe ein Tool zum Verschleiern von CSS entwickelt. Ziel ist es, Stylesheets nicht schneller oder so zu laden, sondern Ihre "wiederverwendbare" Arbeit vor Diebstahl zu schützen. Es gibt mehrere Methoden, wie man eine originale CSS-Quelle bekommen kann (aber es ist noch in der Entwicklung und bessere Methoden werden verwendet). Ich würde es HTML/CSS-Vorlagen-Verkäufern empfehlen, die Live-Demos anbieten und sich Sorgen über Diebstähle machen, und auch für Programmierer - Freelancer, die ihre Arbeit (untreuen) Kunden präsentieren möchten. Sie können es versuchen: http://cssobfuscator.com