Минимизирует ваш HTML, CSS и Javascript плохую идею?

Wikipedia определяет minification как...

[...] процесс удаления всех ненужных символов из исходного кода без изменения его функциональности. Эти ненужные символы обычно включают символы пробела, новые строковые символы, комментарии и иногда блокируют разделители, которые используются для добавления читаемости в код, но не требуются для его выполнения.

В настоящее время я делаю это с моим HTML, CSS и Javascript, чтобы сохранить пропускную способность, но кто-то сказал мне, что он помнит, как браузер ошибочно работает, когда между определенными тегами нет пробелов (а именно ul и li items). Это правда?

Есть ли заметные браузеры, прокси или другие пользовательские агенты, которые плохо себя ведут при работе с мини-кодом?

Помимо потери читаемости при просмотре источника, есть ли другой недостаток для минимизации?

Ответы

Ответ 1

кто-то сказал мне, что он помнит, как браузер плохо себя ведет, когда есть нет пробелов между определенными тегами (а именно ul и li items). Это правда?

Да, в определенных обстоятельствах, например, если для элементов установлено значение inline-block или inline.

Следующие два списка будут отображаться по-разному из-за пробелов между элементами <li>:

HTML

<ul>
    <li>simple</li>
    <li>list</li>
</ul>

<ul><li>minified</li><li>list</li></ul>

CSS

li {
    display: inline-block;
    background: blue;
    color: white;
}

сделанный вывод

http://jsfiddle.net/Uwv3e/

Ответ 2

Уменьшает ли ваш HTML, CSS и Javascript плохую идею? Да, конечно!

Однако хорошая идея - минимизировать ваши CSS и Javascript

Почему?

Работа по минимизации осуществляется путем (a) замены имен переменных для чтения для компактных имен, таких как "mySuperTollesFunctionCall()" на "m()" и (b) Удаление пробелов
В вашем JavaScript вы можете воспользоваться как (a), так и (b)
Ваш CSS может только выиграть от (b)
Ваш код HTML, теоретически, может быть полезен только из (б), но это просто не стоит попробовать.

Любой простой хороший редактор HTML может с легкостью отформатировать ваш HTML файл для вас. Позаботьтесь о белых пробелах внутри блоков "pre", дайте вам намек на соответствие W3C и т.д. И т.д. И т.д.

Если вы беспокоитесь о размере вашего HTML файла... Вы должны включить сжатие статических файлов GZIP на вашем веб-сервере, большинство живых окаменелостей будут обрабатывать его, и ваши клиенты оценят его.

http://www.schroepl.net/projekte/mod_gzip/browser.htm

Ответ 3

Некоторые версии браузеров имеют проблемы с мини-объявлениями font-face, см.:

Ответ 4

Минимизация удаляет ремонтопригодность ради... обычно около 4-8кБ экономии на размере сайта. Вы можете получить больше экономии за счет сжатия одного jpg на сайте и удаления метаданных изображения.

Если вы не создаете веб-сайт с массовым количеством страниц и подстраниц и шаблонов, а также более 5000 строк CSS и JS, вы обнаружите, что минимизация - это пустая трата усилий, особенно когда обслуживание приходит в игру и вы должны хранить неограниченные версии файлов, плавающих вокруг, чтобы делать исправления, минимизировать, перезаписывать мини файлы с новой версией, молиться, чтобы следующий парень, который поддерживает сайт, использует один и тот же рабочий процесс и не вносит изменений в мини файл CSS, затем, когда вы вернетесь и уничтожите его изменения...

Я рассказываю об этом, потому что видел это. Я делал оценки GTmetrics и Pingdom на сайтах pre и post minification, и оценка и скорость загрузки едва меняются настолько, что это стоит того.

Я всегда называл minification "Расходуя доллары на спасение копейки". Ваши усилия могут быть лучше потрачены в другом месте в проекте dev.

Ответ 5

кто-то сказал мне, что он помнит, как браузер плохо себя ведет, когда есть нет пробелов между определенными тегами (а именно ul и li items). Это правда?

Нет, это утверждение ложно. Вот как браузеры должны работать в соответствии с спецификацией HTML в отношении пробелов. Любая последовательность пробелов (tabs, newlines, spaces) означает одно и то же.

Возьмите следующую разметку:

<ul>
    <li>A</li>
    <li>B</li>
</ul>

Правильная оценка этого, также принимая во внимание правила разрыва строки SGML, указав, что пробелы после открытого тега и перед закрывающим тегом могут игнорируется, то правильная мини-передача будет:

<ul><li>A</li> <li>B</li></ul>

Если инструмент минимизации дал следующее, было бы уместно сказать, что minifier был сломан.

<ul><li>A</li><li>B</li></ul>

Исключением из этого правила являются теги PRE, которые определяют предварительно отформатированный контент, а браузеры должны отображать все пробельные символы, и я бы хотел, чтобы вы оставили CDATA, поскольку это технически не является частью содержимого HTML.