1. 解析
源码被扫描成带行号的标签流，因此每一条诊断都能定位回你代码里的具体位置。
01源码0 个字符
02
渲染结果会显示在这里。
HTML 编译器
把 HTML 编译成一个干净的文件
粘贴 HTML、CSS 和 JavaScript，然后点编译。编译器会解析你的标记，报出未闭合标签与重复 id，剔除注释和多余空白，产出一个自包含的单文件——也可以编译成 JavaScript 模板函数。全过程在浏览器本地完成，准备好后可以把编译产物一键发布成公开链接。
概念
什么是 HTML 编译器？
HTML 编译器接收源码标记，产出一份可以直接交付的东西。它会像浏览器那样读取你的文档，指出哪里有问题、哪里有冗余，然后写出优化后的产物——通常是一个去掉注释、缩进和多余属性的压缩 HTML 单文件。
这跟编辑器不同：编辑器只帮你写代码；也跟单纯的压缩器不同：压缩器只减体积却什么都不告诉你。编译器两者兼有——既给出可执行的诊断报告，也给出可以直接交给客户、作为邮件附件发送或原样部署的产物文件。
流水线
对标记做四道处理
每次编译都跑同一条流水线。全程不上传，每一道处理的结果都会显示在编辑器下方的报告里。
2. 诊断
用栈校验标签嵌套是否合法，并对解析后的文档检查重复 id、缺失 alt 文本和缺失的元信息。
3. 优化
删除注释（保留条件注释）、折叠空白、去掉块级元素之间的空隙，并移除冗余属性。
4. 产出
得到单文件 HTML 产物或 JavaScript 模板函数，同时给出可与输入对比的字节数。
产物类型
同一份源码，三种交付方式
在编辑器上方切换输出格式后重新编译。诊断结果不变，只有产物变了。
单文件 HTML
一个 .html 文件，CSS 和 JavaScript 依旧内联其中。不用打包，也不用额外上传配套文件——就算作为邮件附件发出去，对方打开也能正常看。
JavaScript 模板
编译后的标记会被转义成一个模板函数，可被任意打包工具导入。同一段片段需要在服务端和浏览器端共用时特别顺手。
托管链接
发布编译产物，拿到一个公开链接，访问者看到的是优化后的页面，而不是你的原始源码。
使用步骤
从源码到可交付产物
不用注册，不用构建，不用装依赖。
粘贴或拖入文件
从示例开始，打开本地 .html 文件，或直接把它拖到编辑区。
编译并阅读报告
点「编译」，按诊断提示修好问题后再编译一次——之后的改动会自动重新编译。
下载或发布
复制产物、下载到本地，或发布成一个可随处分享的托管链接。
常见问题
HTML 编译器常见问题
HTML 编译器和压缩器是一回事吗？
不完全是。压缩器只负责把体积变小；编译器还会先解析文档并把问题报出来——未闭合标签、嵌套错配、重复 id、缺失 alt 文本——然后才写出优化后的文件。
编译会改变页面的渲染效果吗？
理论上不会。优化器只删除不影响渲染的东西：注释、块级元素周围的空白、冗余属性。你可以在新标签页里打开编译产物，确认表现完全一致。
JavaScript 输出格式会产出什么？
一个导出模板函数的模块，调用后返回编译后的标记字符串。反引号、美元符号加花括号、反斜杠都会做转义，可以直接粘进 JS 或 TS 项目里用。
带 CSS 和 JavaScript 的 HTML 也能编译吗？
可以。内联的 style 与 script 块都会保留；style 块里的 CSS 注释会被清除，而 script 内容保持原样，避免运行时出错。
会把外部样式表和脚本内联进来吗？
不会。用远程 src 或 href 引用的文件会被标记为外部依赖并保持原样。编译器从不请求第三方地址，你的页面信息不会泄露给别的服务器。
编译时代码会被上传吗？
不会。解析、诊断、优化全部在浏览器本地完成。只有在点「发布」时代码才会传到服务器，而且上传的是编译后的产物。
它和 HTML 编辑器有什么区别？
HTML 编辑器是带即时预览的写作界面；编译器在此之上多了一道构建环节：校验文档、优化它，然后交给你一份可下载、可发布的产物。