Web 开发领域长期存在一个隐性成本：为了构建复杂的单页应用（SPA），开发团队往往引入大量 JavaScript 依赖，却忽视了现代 HTML 标准本身已具备的能力。HTML-First 架构作为一种回归平台本质的工程策略，正在重新获得关注 —— 它强调优先使用原生 HTML 功能，仅在必要时引入 CSS 和 JavaScript，从而在性能、可维护性和 SEO 方面获得显著收益。
HTML-First 的核心工程原则
HTML-First 并非简单拒绝现代框架，而是遵循一套系统性的技术决策框架。其核心原则包括：
最小权力原则（Principle of Least Power）：技术选型应从简单到复杂递进 —— 先评估纯 HTML 方案，再考虑 CSS，最后才是 JavaScript。这种层级化思维避免了 "过度工程"，确保每一层只承担其最擅长的职责。
原生优先于框架：许多交互功能（如折叠面板、模态对话框、表单验证）在现代 HTML5 中已有原生支持。使用 <details>/<summary> 实现可折叠容器，利用 <dialog> 元素处理弹窗，通过 required、pattern 等属性完成客户端表单验证，这些方案无需任何脚本即可工作。
最小化客户端状态：将应用逻辑和状态管理迁移至服务端，客户端仅负责展示层。这种架构显著降低了前端代码复杂度，同时避免了 SPA 中常见的状态同步问题。
保留 View-Source 能力：代码应保持可读性和可调试性，避免过度抽象和构建工具链带来的黑盒化。
性能收益的可量化证据
学术研究和实际案例为 HTML-First 的性能优势提供了数据支撑。一项针对芬兰广播公司 Yle 网站的基准测试显示，在采用 HTML-First 重构后，First Contentful Paint（FCP）从 4.4 秒降至 2.0 秒，Largest Contentful Paint（LCP）从 10.2 秒降至 3.4 秒。这一改进主要源于消除了 CSS-in-JS 的运行时开销和大量 JavaScript 的解析执行时间。
更广泛的研究表明，HTML-First 改造可实现 JavaScript 依赖减少 96%、构建时间缩短 88% 的显著优化。在内存受限的移动设备上，这种架构的优势更加明显 —— 更少的脚本意味着更低的内存占用和更流畅的交互响应。
从 Core Web Vitals 角度看，HTML-First 架构天然有利于三项关键指标：LCP 因服务器渲染的静态 HTML 而改善；INP（Interaction to Next Paint）因主线程负担减轻而降低；CLS（Cumulative Layout Shift）则通过原生元素的稳定渲染特性得到控制。
渐进增强与 SEO 协同
HTML-First 与渐进增强（Progressive Enhancement）理念高度契合。核心内容以语义化 HTML 形式交付，确保所有用户代理（包括搜索引擎爬虫、屏幕阅读器和低功耗设备）都能无障碍访问。在此基础上，通过 CSS 增强视觉呈现，再按需叠加 JavaScript 交互层 —— 这种分层策略既保证了基础功能的普适性，又为现代浏览器提供了丰富的用户体验。
对于 SEO 而言，服务器渲染的完整 HTML 文档意味着搜索引擎爬虫无需执行 JavaScript 即可抓取页面内容，这消除了动态渲染（Dynamic Rendering）或预渲染（Prerendering）的额外复杂度。结构化数据（Schema.org 标记）直接嵌入 HTML，进一步提升了搜索结果的富媒体展示机会。
工程实施的可落地参数
在实际项目中落地 HTML-First，可参考以下技术决策清单：
交互组件选型优先级：
- 原生 HTML 元素（
<details>、<dialog>、<input type="date">） - 轻量级属性驱动库（如 Alpine.js，约 15KB）
- 超媒体扩展库（如 htmx，约 14KB）
- 仅在必要时引入完整框架
性能监控阈值：
- 首屏 JavaScript 体积控制在 50KB（gzip）以内
- Time to Interactive（TTI）目标 < 3.5 秒（3G 网络）
- 第三方脚本数量限制在 5 个以内
代码组织策略：
- 采用 "局部行为（Locality of Behavior）" 原则，将相关逻辑聚集在元素附近
- 使用自定义属性（如
data-*）实现声明式行为绑定 - 服务端负责状态管理和业务逻辑验证
适用边界与权衡
HTML-First 并非银弹。对于高度交互的沉浸式应用（如实时协作编辑器、复杂数据可视化、游戏界面），客户端 JavaScript 仍是不可替代的。Gumroad 团队曾评估 htmx 方案，最终因产品对实时交互和生态系统支持的高要求而放弃迁移 —— 这提醒我们架构选型必须匹配产品特性。
内容导向的网站（博客、新闻门户、电商展示页、文档站点）是 HTML-First 的理想应用场景。在这些场景中，信息展示优先于复杂交互，服务器渲染的静态 HTML 配合轻量增强即可满足绝大多数需求。
结语
HTML-First 架构代表了一种技术理性的回归：在拥抱现代 Web 平台能力的同时，保持对复杂性的警惕。通过将核心内容置于语义化 HTML 中、将逻辑迁移至服务端、将客户端 JavaScript 限制在必要范围内，开发团队能够在性能、可维护性和用户体验之间取得更优平衡。随着 Core Web Vitals 成为搜索排名因素，以及用户对页面响应速度的期望不断提升，这种回归平台本质的工程策略将在 2025 年及以后持续展现其价值。
参考来源：
- Juho Vepsäläinen, "The Case for HTML First Web Development," arXiv:2602.17193, 2025
- Tony Ennis, "HTML First Manifesto," html-first.com, 2023
内容声明：本文无广告投放、无付费植入。
如有事实性问题，欢迎发送勘误至 i@hotdrydog.com。