Минимизиране и прикриване на CSS, подобно на Javascript [затворено]

Знам, че има няколко инструмента, които са в състояние да замъглят JavaScript файлове, като например чрез завъртане на прости функции като:

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

в

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

Въпросът ми е съществува ли нещо подобно за използване с CSS/HTML (или има инструмент, който има подобен ефект)? По-специално, инструмент за минимизиране/обфускация, който всъщност преименува променливи и референции и елиминира допълнително бяло пространство и т.н.

И ако е така - ползите от производителността биха надвишили четливостта както при CSS/HTML/JavaScript минимизиране/обфускация?


person Rion Williams    schedule 04.01.2011    source източник
comment
Със сигурност, когато минимизирате нещо, вие напълно изхвърляте четливостта през прозореца!   -  person Marcus Whybrow    schedule 04.01.2011
comment
Съгласен съм - просто се чудя дали ползите от обфускацията си заслужават увеличенията (ако има такива) в производителността.   -  person Rion Williams    schedule 04.01.2011
comment
Мисля, че единственото предимство е, че файлът е по-малък, така че спестявате честотна лента, ако я избутвате на хиляди потребителски агенти на ден.   -  person Marcus Whybrow    schedule 04.01.2011
comment
Какъв е смисълът в замъгляването на CSS и HTML? Класовете все още трябва да съвпадат. Всичко, което губите, е семантично и все още е доста лесно да откраднете каквото искате... хайде... дори и с обфускация, firebug и други все още могат да покажат CSS с посочване и щракване!   -  person Couto    schedule 04.01.2011


Отговори (8)


Много е трудно да се „минифицира“ HTML или CSS, тъй като всичко, което безопасно може да бъде запазено, е бяло пространство (което не представлява огромно спестяване). Що се отнася до преименуването на класове, вие губите важна част от мрежата, която има семантичен код (който представлява смисъл). Мисля, че най-добрият вариант е да се уверите, че имате активирана gzip компресия на вашия уеб сървър и да се съсредоточите върху комбинирането на вашите активи в един файл, когато е възможно.

person Kevin Sylvestre    schedule 04.01.2011
comment
Благодаря, Кевин - просто се чудех дали има някакви инструменти, които да помогнат при изпълнението на подобна задача (всъщност замъгляване на CSS файл и след това преминаване и съответно промяна на действителния HTML), тъй като съм сигурен, че някои анални дизайнери там биха го направили не искат шанс работата им да бъде използвана повторно. - person Rion Williams; 04.01.2011
comment
всеки уеб разработчик, който вярва, че работата им трябва да бъде безопасна от повторна употреба, не заслужава титлата. - person zzzzBov; 04.01.2011
comment
+1 за вашия коментар zzzzBov. :) - person Rion Williams; 04.01.2011
comment
@Rionmonster, @zzzzBov: но как всеки уеб дизайн би работил не за многократна употреба? Трябва да има връзка между елементи, имена на класове, id и правилата за стил на CSS. Като се има предвид, че връзката трябва да е там, няма значение колко вие или „те“ объркате имената на класове. Това може да го направи по-сложно, но със сигурност не е толкова сложно като JS или PHP (наред с много други), обфускация. - person David says reinstate Monica; 04.01.2011
comment
@zzzzBov, трябва да бъде или ще да бъде? Законът за авторското право трябва да защитава работата на програмиста от повторно използване. Ще ще стане ли? Вероятно не. Освен ако не е изрично посочено, че css/javascript/html/images/websites са лицензирани за повторна употреба, използването на каквато и да е част от това съдържание без съгласието на автора е НЕЗАКОННО. - person David Murdoch; 04.01.2011
comment
@Дейвид Томас. Мислех, че PHP разработчиците просто са написали кода си, за да изглеждат объркани като начало! :-p j/k - person David Murdoch; 04.01.2011
comment
@David Thomas, @David Murdoch: Заявявах, че всяко съдържание, налично в мрежата, няма и не трябва да бъде безопасно от повторна употреба. Авторските права не трябва да защитават съдържанието от повторна употреба. Всяко друго убеждение показва присъщо неразбиране на авторското право и честна употреба. - person zzzzBov; 04.01.2011
comment
@zzzzBov, имах предвид само да те включа в разговора, без да се опитвам да намекна, че позицията ти е ограничителна по някакъв начин =) @Дейвид Мърдок, един бог знае какво правят PHP разработчиците или защо... =p - person David says reinstate Monica; 04.01.2011
comment
@zzzzBov: Следното всъщност не е насочено към вас, изглежда вие самият сте достатъчно запознат със закона за авторското право; но по-скоро е за минувача, който се интересува от темата. - person David Murdoch; 05.01.2011
comment
Честната употреба не е предназначена да позволи на професионалистите да се измъкват един друг; честната употреба е акт на балансиране. Например, ако имам онлайн пазарска количка и вие копирате myshoppingcart.css в собствената си пазарска количка (заедно с HTML, разбира се), бих казал, че това не е честна употреба. Така че, при повечето случаи с печалба, които не са от художествено значение, повторното използване/копиране на източника на уеб приложение (CSS,HTML,JavaScript,C#,php) вероятно няма да попадне в честна употреба (и вероятно ще бъде в рамките на домейна от DMCA). - person David Murdoch; 05.01.2011
comment
(@David)*2 не бях сигурен дали съм бил разбран погрешно, затова се погрижих да изясня. - person zzzzBov; 05.01.2011
comment
Вярвам, че не става дума за спиране на хората да откраднат вашия код, а за увеличаване на производителността в големи проекти, това е много значително подобрение, тъй като засяга размерите на css, html и js файловете и подобрява gzipping-а, дори ако получите 10 kb на вашия gzipped код, добавете това към милиони посещения, дори може да ви спести нещо и от хостинг, най-добрият вариант за това би бил компилаторът за затваряне на google code.google.com/p/closure-stylesheets - person Gustavo Siqueira; 09.06.2015
comment
Това не е отговор. По принцип вие само казвате, че обфускацията на CSS и HTML е трудна и нищо друго. @zzzzBov, какво ще кажете за Google - printscreen? Мислите ли, че са идиоти, че са объркали кода си? - person Victor; 28.10.2015
comment
@Victor, те не прикриват кода си, за да предотвратят кражба, те го минимизират за ефективност. - person zzzzBov; 29.10.2015

HTML Muncher е инструмент на Python, който се опитва да преименува идентификатори и имена на CSS класове в HTML, javascript и CSS файлове. Можете да го използвате като първа стъпка в процеса на оптимизация, преди да предадете файловете на други инструменти като Google Closure Compiler или YUI CSS Compressor.

person zah    schedule 06.07.2011
comment
HTML Muncher е чудесен инструмент. Спестяванията обаче никога няма да бъдат огромни, ако вече използвате gzip. Оригинал = 148k - Minify+gzip = 17929 v. Munched+minify+gzip = 15905 - спестяване на приблизително 2k за много работа - person CalM; 14.12.2013
comment
отчетете тези 2kb за милиони показвания на страници и това ще има значение :) - person Gustavo Siqueira; 09.06.2015

Компресорът YUI минифицира CSS, но не съм сигурен колко голяма победа е може да е над проста gzip компресия. Ако имате толкова много CSS, това може да е предупредителен знак за по-големи проблеми.

person Hank Gay    schedule 04.01.2011
comment
Благодаря, Ханк - разгледах накратко YUI Compressor по-рано - тъй като вярвам, че той минифицира CSS доколкото може (премахва цялото празно пространство). Просто исках да видя дали има подобни на инструментите в стил JavaScript. (О, и не се притеснявайте - това не е зададено поради проблем, по-скоро от любопитство) - person Rion Williams; 04.01.2011
comment
Ханк – ако работите по голям проект (особено в корпоративна среда), обичайно е да срещнете безброй CSS файлове, които изискват минимизиране, за да се намали въздействието върху производителността на сайта. Виждал съм няколко големи компании да използват YUI Compressor, за да се справят с минимизирането на CSS. Обфускацията обаче... не толкова. - person calvinf; 05.01.2011
comment
@calvinf Сигурен съм, че има изключения от правилото, но повечето сайтове наистина не трябва да се нуждаят от купчина и купчина CSS. Дори и да имате нужда от много CSS, с колко KB трябва да започнете, за да може един CSS минификатор да има значително въздействие? Няма ли обединяването на всички в един файл, настройките за кеширане и GZip компресията да имат много по-голямо въздействие? - person Hank Gay; 05.01.2011
comment
Съгласен съм, че тези настройки също са важни. Минимизирането е важно, защото на някои сайтове всеки килобайт има значение - gzip не е толкова добър, колкото gzip + минимизиране. - person calvinf; 05.01.2011

Разгледайте това: minifycss

Що се отнася до обфускацията, не съм сигурен, че това е толкова добра идея. CSS класовете могат да се манипулират навсякъде. В момента, в който промените css, ще загубите връзката към класовете/идентификаторите и т.н.

person Community    schedule 04.01.2011

Ако използвате Ruby, ето Ruby CSS Minifier, който използвам за добър ефект. Предвид вече лаконичния ми стил, това ми дава около 15% намаление на размера на файловете ми.

Например, в един проект съвкупността от 5 файла по 32,3 kiB става 1 файл от 26,4 kiB (18%). В друг проект 2 файла от 21,6 kiB стават 1 файл от 19,0 kiB (12%).

person Phrogz    schedule 04.01.2011

Разгледайте html5boilerplate.com; по-специално най-новия изходен код на GitHub.

Скриптът за изграждане на HTML5Boilerplate може да минифицира JavaScript, CSS и HTML вместо вас. Той не преименува вашите CSS селектори, но вероятно е най-близкият до автоматизиран "обфускатор", който ще намерите.


Ако просто искате да извлечете някои допълнителни байтове от всяка страница, уверете се, че използвате gzip/deflate компресия и СЛЕД това опитайте да подредите по азбучен ред свойствата на вашия CSS селектор и атрибутите на вашия HTML елемент и техните стойности.

Прочетете това за подробни препоръки на Google относно горния метод.


В някои динамични езици с HTML помощници (като asp.net/C#) можете да презапишете метода „ClientID“ на html-контролата, за да бъде произволен низ и динамично да свържете вашите CSS селектори към вашия HTML (е, контролите от страна на сървъра, които изобразяват HTML). Но това би било съвсем друг въпрос и вероятно не е това, в което искате да навлезете. Това също би се превърнало в кошмар за поддръжка.


person David Murdoch    schedule 04.01.2011

Има много онлайн инструменти, които можете да използвате за неща като минимизиране на css. Ето един онлайн css minifier! Намерих.

Що се отнася до преименуването на css класове, бих се опитал да избегна това, тъй като ще загубите голяма част от четливостта на вашия html.

person t_warsop    schedule 05.04.2014

Разработих инструмент за обфускация на CSS. Неговата цел не е стиловите таблици да се зареждат по-бързо или каквото и да е, а да направи работата ви за многократна употреба безопасна от кражба. Той има няколко метода как да направите адски много от получаването на оригинален CSS източник (но все още е в процес на разработка и ще бъдат използвани по-добри методи). Бих го препоръчал на продавачи на HTML/CSS шаблони, които предоставят демонстрации на живо и се притесняват от кражби, а също и на програмисти - фрийлансъри, които искат да представят работата си на (недоверчиви) клиенти. Можете да опитате: http://cssobfuscator.com

person user3720773    schedule 19.09.2014
comment
Здравейте, мога ли да включа това в моя процес на изграждане с помощта на gulp - person Bhargav; 25.02.2020