Минимизация и запутывание 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?


javascript obfuscation html css minify
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)


arrow_upward
11
arrow_downward

Очень сложно «минифицировать» 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, я хотел только включить вас в разговор, не пытаясь намекнуть, что ваша позиция была каким-либо образом ограничительной =) @David Murdoch, только бог знает, что вытворяют 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), скорее всего, не подпадает под добросовестное использование (и, вероятно, будет в пределах домена Закона США "Об авторском праве в цифровую эпоху"). - person David Murdoch; 05.01.2011
comment
(@David)*2 не был уверен, что меня неправильно поняли, поэтому постарался уточнить. - person zzzzBov; 05.01.2011
comment
Я считаю, что речь идет не о том, чтобы люди не могли украсть ваш код, а о повышении производительности в больших проектах, это очень значительное улучшение, так как оно влияет на размеры файлов css, html и js, а также улучшает сжатие, даже если вы получаете 10 КБ. вашего gzip-кода, добавьте это к миллионам посещений, это может даже сэкономить вам кое-что на хостинге, лучшим вариантом для этого будет компилятор закрытия Google code.google.com/p/таблицы стилей закрытия - person Gustavo Siqueira; 09.06.2015
comment
Это не ответ. По сути, вы только говорите, что запутать CSS и HTML сложно, и ничего больше. @zzzzBov, а как насчет Google — printscreen? Вы думаете, что они идиоты из-за того, что запутывают свой код? - person Victor; 28.10.2015
comment
@Victor, они не запутывают свой код, чтобы предотвратить кражу, они минимизируют его для повышения производительности. - person zzzzBov; 29.10.2015

arrow_upward
9
arrow_downward

HTML Muncher – это инструмент на Python, который пытается переименовывать идентификаторы и имена классов CSS в файлах HTML, javascript и CSS. Вы можете использовать его в качестве первого шага в процессе оптимизации перед передачей файлов другим инструментам, таким как Google Closure Compiler или YUI CSS Compressor.

person zah    schedule 06.07.2011
comment
HTML Muncher — отличный инструмент. Однако экономия никогда не будет огромной, если вы уже используете gzip. Оригинал = 148 КБ - Minify+gzip = 17929 v. Munched+minify+gzip = 15905 - экономия примерно 2 КБ за большую работу - person CalM; 14.12.2013
comment
учитывайте эти 2 КБ для миллионов просмотров страниц, и это будет иметь значение :) - person Gustavo Siqueira; 09.06.2015

arrow_upward
2
arrow_downward

Компрессор 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, сколько КБ вам нужно, чтобы минимизатор CSS оказал существенное влияние? Разве объединение их всех в один файл, настройки кэширования и сжатие GZip не окажут гораздо большего влияния? - person Hank Gay; 05.01.2011
comment
Я согласен, что эти настройки тоже важны. Минификация важна, потому что на некоторых сайтах важен каждый килобайт — gzip не так хорош, как gzip + минификация. - person calvinf; 05.01.2011

arrow_upward
1
arrow_downward

Взгляните на это: minifycss

Что касается обфускации, я не уверен, что это хорошая идея. Классами CSS можно манипулировать где угодно. В ту минуту, когда вы измените CSS, вы потеряете ссылку на классы/идентификаторы и т.д.

person Community    schedule 04.01.2011

arrow_upward
1
arrow_downward

Если вы используете Ruby, вот Ruby CSS Minifier, который я успешно использую. Учитывая мой и без того лаконичный стиль, размер файлов уменьшается примерно на 15%.

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

person Phrogz    schedule 04.01.2011

arrow_upward
0
arrow_downward

Взгляните на 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

arrow_upward
-1
arrow_downward

Есть много онлайн-инструментов, которые вы можете использовать для таких вещей, как минимизация css. Вот онлайн-минификатор CSS! Я нашел.

Что касается переименования классов css, я бы постарался избежать этого, так как вы потеряете большую часть читабельности вашего html.

person t_warsop    schedule 05.04.2014

arrow_upward
-2
arrow_downward

Я разработал инструмент для запутывания CSS. Его цель не в том, чтобы ускорить загрузку таблиц стилей или что-то в этом роде, а в том, чтобы сделать вашу «многоразовую» работу безопасной от кражи. У него есть несколько методов, как получить оригинальный исходный код CSS (но он все еще находится в разработке, и будут использоваться лучшие методы). Я бы порекомендовал его продавцам шаблонов HTML/CSS, которые предоставляют живые демонстрации и опасаются кражи, а также программистам-фрилансерам, которые хотят представить свою работу (недоверчивым) клиентам. Вы можете попробовать: http://cssobfuscator.com

person user3720773    schedule 19.09.2014
comment
Привет, могу ли я включить это в процесс сборки с помощью gulp? - person Bhargav; 25.02.2020