it-swarm.com.ru

Является ли сокращение ваших HTML, CSS и Javascript плохой идеей?

Википедия определяет минификацию как ...

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

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

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

Кроме потери читабельности при просмотре источника, есть ли другой минус в минификации?

18
JohnCand

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

Да, в определенных обстоятельствах, например, если элементы настроены на отображение 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;
}

визуализированный вывод

enter image description here

http://jsfiddle.net/Uwv3e/

12
xec

Сокращение ваших HTML, CSS и Javascript - плохая идея? Да, конечно!

Однако хорошей идеей будет минимизировать ваш CSS и Javascript

Зачем?

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

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

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

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

8
Adrian Salazar

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

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

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

Я всегда называл минификацию "Тратить доллары на копейки". Ваши усилия могут быть лучше потрачены в другом месте на проект разработчика.

8
Ben

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

4
leo

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

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

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

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

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

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

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

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

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

1
Dar Brett