HTML代码压缩工具

在线压缩 HTML 代码,移除注释、多余空白和空属性,减小页面体积,可选择保留 pre/textarea 内空白,纯本地处理。

功能说明

本工具用于压缩 HTML 代码,减小文件体积,提升网页加载速度。主要功能包括:

使用方法

将 HTML 代码粘贴到输入框中,根据需要勾选压缩选项,点击“压缩”按钮即可。结果区会显示压缩前后的体积对比和压缩后的代码,点击“复制结果”可复制到剪贴板。也可以使用 Ctrl+Enter 快捷键快速压缩。

计算原理

压缩原理基于正则表达式和字符串处理:

注意:pre、textarea、script、style 标签内部的内容会被保留原样,避免破坏代码功能。

注意事项

压缩后代码会不会影响功能?

正常情况下不会。工具会保留 pre、textarea、script、style 标签内部的内容,避免破坏代码逻辑。但压缩会移除注释和多余空白,如果您的代码依赖注释(例如某些特殊标记),可能会受影响。建议在压缩前备份原代码。

为什么我的布尔属性没有被简化?

工具只识别常见的布尔属性列表(如 disabled、checked、selected 等),如果您的属性不在列表中,可能不会被处理。另外,如果属性值不是属性名本身(如 checked="true"),也不会被简化,这是为了安全考虑。

压缩内联 CSS/JS 后体积减少不明显?

内联 CSS/JS 的压缩效果取决于代码本身。如果代码已经比较精简,压缩空间有限。另外,工具只移除注释和多余空白,不会进行变量重命名等深度优化。如果需要更大幅度压缩,建议使用专业的 CSS/JS 压缩工具。

压缩后的代码可以用于生产环境吗?

可以,但建议先测试功能是否正常。压缩后的代码可读性差,不利于后期维护,建议保留原始代码版本。同时,如果您的 HTML 中包含动态生成的内容或特殊字符,请确认压缩后没有破坏结构。

'; }); }); } } // 3. 移除布尔属性冗余值 if (removeRedundantAttrs.checked) { const booleanAttrs = ['allowfullscreen', 'async', 'autofocus', 'autoplay', 'checked', 'controls', 'default', 'defer', 'disabled', 'formnovalidate', 'hidden', 'ismap', 'itemscope', 'loop', 'multiple', 'muted', 'nomodule', 'novalidate', 'open', 'playsinline', 'readonly', 'required', 'reversed', 'selected']; result = result.replace(/<([a-zA-Z][a-zA-Z0-9]*)([^>]*)>/g, function(match, tag, attrs) { if (!attrs) return match; let newAttrs = attrs; booleanAttrs.forEach(function(attr) { const regex = new RegExp('\\s+' + attr + '\\s*=\\s*([\"\'\\s]*)' + attr + '([\"\'\\s]*)', 'i'); newAttrs = newAttrs.replace(regex, ' ' + attr); }); return '<' + tag + newAttrs + '>'; }); } // 4. 压缩标签间空白和换行(保留 pre, textarea, script, style 内部内容) if (collapseWhitespace.checked) { // 使用占位符保护受保护标签的内容 const protectedContents = []; let placeholderIndex = 0; result = result.replace(/<(pre|textarea|script|style)[^>]*>[\s\S]*?<\/\1>/gi, function(match) { const placeholder = '___PROTECTED_' + (placeholderIndex++) + '___'; protectedContents.push(match); return placeholder; }); // 压缩空白:移除标签之间的空白和换行,但保留标签内的必要空格 result = result .replace(/\s+/g, ' ') // 合并所有空白为一个空格 .replace(/>\s+<') // 移除标签之间的空白 .replace(/\s+>/g, '>') // 移除标签内属性后的多余空格(但可能影响属性值,谨慎) .replace(/<\s+/g, '<'); // 移除标签起始处的空格 // 恢复受保护内容 protectedContents.forEach(function(content, index) { result = result.replace('___PROTECTED_' + index + '___', content); }); } return result.trim(); } function formatBytes(bytes) { if (bytes < 1024) return bytes + ' B'; if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB'; return (bytes / (1024 * 1024)).toFixed(2) + ' MB'; } function compress() { const original = input.value; if (!original.trim()) { resultDiv.innerHTML = '

请输入需要压缩的 HTML 代码。

'; return; } const compressed = compressHTML(original); const originalSize = new Blob([original]).size; const compressedSize = new Blob([compressed]).size; const saved = originalSize - compressedSize; const percent = originalSize > 0 ? ((saved / originalSize) * 100).toFixed(2) : 0; let html = '
'; html += '
' + formatBytes(originalSize) + '
原始大小
'; html += '
' + formatBytes(compressedSize) + '
压缩后大小
'; html += '
' + saved + ' B
节省
'; html += '
' + percent + '%
压缩率
'; html += '
'; html += '
'; html += '
'; resultDiv.innerHTML = html; // 绑定复制按钮 const copyBtn = document.getElementById('t_copyBtn'); if (copyBtn) { copyBtn.addEventListener('click', function() { const output = document.getElementById('t_output'); if (output) { output.select(); document.execCommand('copy'); copyBtn.textContent = '已复制'; setTimeout(function() { copyBtn.textContent = '复制结果'; }, 2000); } }); } } compressBtn.addEventListener('click', compress); clearBtn.addEventListener('click', function() { input.value = ''; resultDiv.innerHTML = ''; }); // 支持 Ctrl+Enter 快捷键 input.addEventListener('keydown', function(e) { if (e.ctrlKey && e.key === 'Enter') { compress(); } }); })();