压缩 HTML _

HTML 压缩是如何工作的

压缩器用一个小型状态机逐一扫描输入，区分需原样保留的区域（<pre>、<textarea>、<script>、<style>）与可安全折叠空白及注释的可编辑区域。

1. 标记保留块. 扫描器逐字符读取输入，当遇到开启的 <pre>、<textarea>、<script> 或 <style> 标签时进入保留状态。这些标签内的所有内容都原字节保留，直到遇到对应的关闭标签。
2. 折叠可编辑空白. 在可编辑区域，扫描器将所有连续的空格、制表符和换行折叠成单个空格，再裁剪标签边界前后的前导与尾随空白。可见文本的回流方式与浏览器渲染方式相同。
3. 删除注释. 开启开关时，<!-- ... --> 块会被移除。由于旧版邮件客户端仍依赖 IE 条件注释（<!--[if IE]> ... <![endif]-->），保留条件注释开关开启时它们会保留。
4. 折叠布尔属性. checked="checked"、disabled="disabled"、required="required" 等冗长形式缩减为裸属性名。HTML5 规范将裸形式视为语义等价，因此渲染后的 DOM 不会改变。
5. 报告字节差. 原始文本和压缩文本均通过 new TextEncoder().encode(...).byteLength 计量，这与 CDN 或 HTTP 服务器在网络上看到的 UTF-8 字节数相同。指标条显示原始大小、压缩后大小、节省字节数和节省百分比。

为什么要压缩 HTML

• 页面加载更快. 更小的 HTML 更快到达浏览器，解析器更早完成。在移动网络上，字节节省直接转化为更快的首次内容绘制（FCP）和更好的 Lighthouse 性能评分。
• 降低 CDN 出流量费用. CloudFront、Cloudflare 和 Fastly 按 GB 出流量计费。每月数百万次访问中 20% 的 HTML 减少，在图片或脚本优化到位之前就已累积成真实账单节省。
• 更整洁的拉取请求 diff. 提交到仓库的预构建静态 HTML 每次模板调整都会重新缩进，噪音很大。dist 文件夹中的压缩 HTML 生成更紧凑的 PR diff，聚焦于真实内容变更而非空白扰动。
• 更小的嵌入与代码片段. 电子邮件模板、第三方 widget 片段，以及存储在 JSON 或 YAML 配置中的 HTML 同样受益于字节削减。压缩后的嵌入使事务邮件保持在 ESP 大小上限以内，并减小 widget 包体积。

常见应用场景

HTML 压缩几乎出现在所有静态站点或 JAMstack 构建流程的末尾，以及一些字节比源代码可读性更重要的运行时场景中。

• 静态站点构建步骤：Eleventy、Hugo、Astro 和 Next.js 生产构建在写入 dist 文件夹前会将 HTML 通过压缩器，使部署包小于源代码。
• 事务邮件：ESP（SendGrid、Postmark、Mailgun）对 HTML 正文大小有上限，内联 CSS 展开后字节数迅速增加。发送前压缩正文可使邮件保持在上限以内。
• 嵌入式 widget：以内联 HTML 形式分发的第三方 widget 和聊天代码片段，每次访问都需要宿主页面下载，因此每个字节的节省都有意义。

一个实际示例

粘贴一个带两空格缩进、行间有三个换行、顶部有 HTML 注释块，以及一个 <input type="checkbox" checked="checked" /> 的冗长 500 字节表单片段。开启所有选项后，输出折叠到约 300 字节——节省约 40%——而渲染后的 DOM 树与源代码字节等价。

压缩会破坏我的 HTML 吗？

使用默认开关时不会。压缩器原字节保留 <pre>、<textarea>、<script> 和 <style> 标签的内容，在该开关开启时保留 IE 条件注释，且只折叠 HTML5 解析器已归类为无意义的空白。渲染后的 DOM 树与源代码字节等价。激进选项（删除空属性）可能会对刻意使用 value="" 或 alt="" 的片段改变行为，因此启用后请审查输出。

此工具会压缩内联 CSS 和 JS 吗？

本工具不会。内联 <style> 和 <script> 正文原样保留，以免压缩器因折叠字符串字面量或正则表达式中的空白而破坏 CSS 规则或 JS 语句。如需 CSS 专项压缩，请使用 CSS 压缩器；JS 请使用 JS 压缩器。HTML 压缩器专注于标记本身。

能节省多少？

手工编写的 HTML 通常可节省 10 至 30%，具体取决于源代码使用缩进、空行和冗长属性的程度。Next.js 等框架生成的预构建静态 HTML 通常可节省 15 至 25%，因为框架已做了部分优化但保留了人类可读的空白。注释大量、深度嵌套的邮件样式 HTML 可达 40% 甚至更多。

pre 内容会保留吗？

会。压缩器明确将 <pre>、<textarea>、<script> 和 <style> 块标记为原样保留区域，将其内容逐字节复制到输出。这些标签内的空白、换行和缩进在压缩后完全不变，因此代码示例和 ASCII 艺术在压缩后渲染效果与原来完全一致。

浏览器端 HTML 压缩让您的构建流程简洁、标记精小。在上方粘贴任意 HTML，调整选项开关，复制或下载压缩后的输出——无需上传、无需账户、无需第三方库。