2011-01-04 11 views
8

Wiem, że istnieje kilka narzędzi, które obecnie nie są w stanie kasował pliki JavaScript, takich jak obracając prostych funkcji, takich jak:Zmniejszanie kodu i Obsfucating CSS podobny do JavaScript

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

do

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

My Pytanie brzmi, czy coś takiego istnieje do użycia z CSS/HTML (lub czy istnieje narzędzie, które ma podobny efekt)? W szczególności narzędzie do minimalizacji/zaciemniania, które w rzeczywistości zmienia nazwy zmiennych i odwołań oraz eliminuje dodatkową białą przestrzeń itp.

A jeśli tak, czy korzyści z wydajności przewyższałyby czytelność zarówno w przypadku zminimalizowania/zaciemnienia CSS/HTML/JavaScript?

+0

Z pewnością, gdy coś zminimalizujesz, rzucasz czytelność przez okno w nieskończoność! –

+0

Zgadzam się - zastanawiam się - zastanawiam się, czy korzyści z zaciemniania są warte podniesienia (jeśli w ogóle) wydajności. –

+0

Myślę, że jedyną korzyścią jest to, że plik jest mniejszy, więc oszczędzasz przepustowość, jeśli przesyłasz to do tysięcy agentów użytkownika dziennie. –

Odpowiedz

9

Bardzo trudno jest "zminimalizować" HTML lub CSS, ponieważ wszystko, co można bezpiecznie zapisać, to biała spacja (która nie jest ogromną oszczędnością). Jeśli chodzi o zmianę nazwy klasy, tracisz ważną część sieci, która ma kod semantyczny (który reprezentuje znaczenie). Uważam, że najlepszą opcją jest zapewnienie włączonej kompresji gzip na serwerze internetowym i skupienie się na łączeniu zasobów w jeden plik, gdzie tylko to możliwe.

+0

Dzięki Kevin - Zastanawiałem się, czy są jakieś narzędzia, które pomogą w wykonaniu takiego zadania (właściwie zaciemnią plik CSS, a następnie przejdą i zmienią odpowiednio odpowiedni HTML), ponieważ jestem pewien, że niektórzy projektanci nie chcą, aby ich praca była "ponownie wykorzystana". –

+19

każdy "programista internetowy", który uważa, że ​​ich praca powinna być bezpieczna przed ponownym użyciem, jest niegodny tytułu. – zzzzBov

+0

+1 za komentarz zzzzBov. :) –

2

Kompresor YUI minifies CSS, ale nie jestem pewien, jak duża może być wygrana nad prostą kompresją gzip. Jeśli masz tak dużo CSS, może to być ostrzeżenie o większych problemach.

+0

Dzięki Hank - Wcześniej przyjrzałem się Kompresorowi YUI, ponieważ uważam, że "minimalizuje CSS" tak bardzo, jak tylko może (usuwa całą białą przestrzeń). Chciałem tylko sprawdzić, czy są podobne do narzędzi w stylu JavaScript. (Och i nie martw się - to nie było zadawane z powodu problemu, tylko z ciekawości) –

+0

Hank - jeśli pracujesz nad dużym projektem (szczególnie w środowisku korporacyjnym), często napotykamy mnóstwo plików CSS, które wymagać zminimalizowania w celu zmniejszenia wpływu na wydajność witryny. Widziałem kilka dużych firm wykorzystujących kompresor YUI do obsługi minikompilacji CSS. Oabezpieczenie jednak ... nie tak bardzo. – calvinf

+0

@calvinf Jestem pewien, że są wyjątki od reguły, ale większość stron naprawdę nie powinna potrzebować ryz i przecinków CSS. Nawet jeśli potrzebujesz * dużo * kodu CSS, ile KB należy zacząć od tego, że miniatura CSS ma znaczący wpływ? Czy nie łączyłoby ich wszystkich w jeden plik, ulepszenia pamięci podręcznej, a kompresja GZip - wszystko to ma znacznie większy wpływ? –

1

Spójrz na to: minifycss

Co do zaciemniania nie jestem pewien, że jest to taki dobry pomysł. Klasy css można manipulować w dowolnym miejscu. W momencie zmiany css utracisz link do klas/ids itp.

0

Spójrz na html5boilerplate.com; konkretnie najnowszy kod źródłowy na GitHub.

Skrypt budujący HTML5Boilerplate może zminimalizować JavaScript, CSS i HTML dla Ciebie. Nie zmienia nazwy selektorów CSS, ale prawdopodobnie jest najbliżej automatycznego "obfuscatora", który znajdziesz.


Jeśli tylko szukasz EEK się kilka dodatkowych bajtów z każdej strony upewnij się, że korzystasz z gzip/deflate kompresji, a następnie spróbuj alphabetizing swoje właściwości selektor CSS i atrybuty elementu HTML i ich wartości.

za szczegółowe zalecenia Google dotyczące powyższej metody.


W niektórych językach dynamicznych z pomocników HTML (takich jak asp.net/C#) można zastąpić „ClientID” metody HTML-CONTROL, aby być przypadkowy ciąg i dynamicznie połączyć swoje selektorów CSS HTML (dobrze, kontrolki po stronie serwera renderujące HTML). Ale to by było na zupełnie inne pytanie i prawdopodobnie nie jest to, czego szukasz. To także stałoby się koszmarem dla utrzymania.


0

Jeśli używasz Ruby, tutaj jest Ruby CSS Minifier, którego używam do dobrego efektu. Biorąc pod uwagę mój już zwięzły styl, pozwala mi to zmniejszyć o około 15% moje rozmiary plików.

Na przykład w jednym projekcie suma 5 plików w 32.3kiB staje się plikiem o wielkości 26,4 KB (18%). W innym projekcie 2 pliki o rozmiarze 21.6kiB stają się 1 plikiem o wartości 19,0 kilobajtów (12%).

9

HTML Muncher to narzędzie Pythona, które próbuje zmienić nazwę identyfikatora i nazwę klasy CSS w plikach HTML, javascript i CSS. Możesz użyć go jako pierwszego kroku w procesie optymalizacji, przed przekazaniem plików do innych narzędzi, takich jak Kompilator zamykania lub Kompresor YUI CSS.

+0

HTML Muncher jest doskonałym narzędziem. Jednak oszczędności nigdy nie będą ogromne, jeśli już używasz gzip. Original = 148k - ** Minify + gzip = 17929 v. Munched + minify + gzip = 15905 ** - oszczędność około 2 tys. Za dużo pracy – CalM

+0

Oblicz te 2kb za miliony odsłon stron, a to będzie miało znaczenie :) –

-1

Istnieje wiele narzędzi internetowych, których można używać do takich rzeczy jak minifikacja CSS. Oto online css minifier! Znalazłem.

Jeśli chodzi o zmianę nazwy klas css, starałbym się tego uniknąć, ponieważ stracisz dużo czytelności ze swojego html.

-3

Opracowałem narzędzie do obfuskacji CSS. Jego celem nie jest przyspieszenie ładowania arkuszy stylów, czy cokolwiek innego, ale uniemożliwienie kradzieży "wielokrotnego użytku". Ma kilka metod, jak zrobić piekło uzyskania oryginalnego źródła CSS (Ale wciąż jest w fazie rozwoju i zostaną zastosowane lepsze metody). Poleciłbym to sprzedawcom szablonów HTML/CSS, którzy dostarczają dema na żywo i obawiają się kradzieży, a także dla programistów - freelancerów, którzy chcą zaprezentować swoją pracę (niezaufanym) klientom. Możesz go wypróbować: http://cssobfuscator.com

Powiązane problemy