Что такое HTML-минификатор и улучшитель?
HTML-минификатор и Beautifier сжимает HTML-документы, удаляя комментарии и срывая пробелы, которые оставляют ваши шаблоны и редакторы - отступ, пустые строки и пробелы, которые игнорируют браузеры, но все по-прежнему загружаются. Документ HTML является самым первым ресурсом в каждой загрузке страницы; ничего не отображается, пока не придет, поэтому байты, обрезанные здесь, переносят первую содержательную краску и время в метрику, смежную с байтами, более прямые, чем практически любой другой актив. На серверных страницах и шаблонах вывода регулярно сбрасываются 10–25% их размера.
Критическая деталь в минимизации HTML заключается в том, чтобы знать, чего не трогать. Этот инструмент маскирует содержимое элементов <pre>, <textarea>, <script> и <style>, а затем восстанавливает их байт за байт, поэтому образцы кода сохраняют свои разрывы строк, текстовые поля по умолчанию сохраняют форматирование, а встроенный JavaScript и CSS никогда не переписываются. Цитируемые значения атрибутов сохраняются точно, и условные комментарии могут сохраняться даже при удалении обычных комментариев - та же дисциплина, что и html-minifier-terser, применяется минифак времени сборки.
Бьютификатор делает обратную: он принимает минимальную или беспорядочную разметку и пересчитывает ее с помощью структуры, защищающей от вложенных элементов, сохраняя встроенные элементы, такие как <span>, <a> и <strong>, текущие с окружающим текстом, вместо того, чтобы разбивать каждую тег на свою собственную линию. В вашем браузере все работает на 100% на стороне клиента — ваша разметка никогда не загружается и не регистрируется, поэтому выскребающие страницы, экспорт CMS и проприетарные шаблоны — все это безопасно для вставки, а инструмент продолжает работать в автономном режиме.
Пробелы в HTML не всегда незначительны, поэтому Pre, TextArea, Script и Style оставляются такими, как они есть. Срыв пробела внутри блока предварительного блока меняет то, что видит читатель, а срыв внутри скрипта может изменить то, что делает скрипт.
Как использовать минимальный html-минификатор и украсить?
Вставьте свой HTML
Переместите фрагмент, шаблон компонента или полный документ во входную область. Принимаются как форматированные, так и уже минимизированные разметки.
Установите свои варианты
Для минимизации, переключать удаление комментариев, обрушение пробелов и сохранение условного комментария. Для украшения выберите 2, 4 или 8 пробелов.
Нажмите «Минифицировать» или «Украсить»
Minify сжимает разметку, защищая <pre>, <textarea>, <script> и <style>. Украсить вложенные теги в отступах и сохранять читаемые встроенные элементы. На сберегательной ленте указаны точные размеры до/после.
Скопируйте или скачайте
Скопируйте результат в буфер обмена или загрузите его в виде файла .html, готового к развертыванию или проверке.
Основные характеристики
Защищенные блоки содержимого
<pre>, <textarea>, <script> и <style> содержимое маскируются и восстанавливаются байт-для байта - примеры кода и встроенные скрипты никогда не искажают
Настраиваемая минимизация
Независимые переключатели для удаления комментариев, обрушения пробелов и сохранения условного комментария IE
Атрибут-безопасный разрушение
Пробелы внутри кавычки в точности сохраняются, поэтому ALT текст, атрибуты данных и встроенный JSON нетронуты
Структурно-улучшенный лучезап
Вложенные элементы вложенных блоков при сохранении встроенных тегов, таких как <span> и <a>, текущие с текстом; теги void не нуждаются в закрывающей паре
Frequently Asked Questions
Related Tools
CSS Minifier & Beautifier
Minify CSS to cut file size or beautify minified stylesheets for debugging
JSON Minifier
Minify JSON by removing whitespace, or beautify it with clean indentation, with live size-savings stats and exact parser error messages
SQL Formatter
Format messy SQL into readable, indented queries or minify SQL to a single line
HTML Entity Encoder/Decoder
Encode and decode HTML entities - named (&), decimal (&), and hex (&) forms, with XSS-safe special-character escaping
Comments
0 comments
No comments yet. Be the first to share your thoughts!