[Paper] 支持 HTML 优先的 Web 开发的理由

Source: arXiv - 2602.17193v1

概述

Juho Vepsäläinen 的论文主张 “HTML First” 的网页开发方式——一种把 HTML 视为网页应用主要构建块的严谨方法，只有在标记本身无法完成任务时才使用 JavaScript 框架。通过依赖现代 HTML5、服务器端渲染以及超媒体原则，作者展示了开发者可以在不牺牲交互性的前提下，缩减代码库、提升性能并简化维护。

关键贡献

• “HTML First”的定义 – 一套具体的设计指南，优先考虑原生 HTML 语义、服务器驱动的逻辑以及最小化的客户端脚本。
• 实证证据 – 对传统 SPA 堆栈和 HTML‑first 实现进行定量比较（代码规模、加载时间和内存使用），包括对 Yle 新闻门户的真实案例研究。
• 与 htmx 的集成 – 演示轻量级 htmx 库如何在纯 HTML 与动态 UI 需求之间架起桥梁，在许多场景中有效取代大型 JavaScript 框架。
• 性能和可维护性分析 – 基于原型的基准测试显示，内容丰富的网站可实现 JavaScript 负载降低最高 45 %，以及 首字节时间提升 30 %。
• 权衡讨论 – 探讨 HTML‑first 的优势所在（内容驱动站点、表单密集型应用），以及何时仍需更丰富的客户端状态。

方法论

1. 文献与标准回顾 – 论文调查了 HTML 的演进（从 1991 年到 HTML5）以及 SPA 框架的兴起，确立技术背景。
2. “HTML First” 原则的设计 – 一个检查清单（语义化标记优先、服务器端路由、渐进增强、最小化 JS、超媒体驱动的导航）。
3. 原型实现 – 构建了同一功能的两个平行版本：
   • 传统的基于 React 的 SPA。
   • 使用服务器渲染模板 + htmx 进行增量更新的 HTML‑first 版本。
4. 全样本基准测试 – 对相同内容驱动的页面在各浏览器中测量了捆绑大小、网络负载、渲染时间以及 CPU/内存使用情况。
5. 案例研究转换 – 将公共的 Yle 新闻站点重构为遵循 HTML‑first 指南；在迁移前后收集了指标。
6. 定性开发者反馈 – 一小组前端工程师报告了代码可读性、上手速度以及 bug 修复的周转时间。

结果与发现

• 代码库缩减：HTML‑first 原型所需的前端源代码大约只有原来的三分之一。
• 性能提升：减少的 JavaScript 负载转化为更快的网络传输和更低的主线程工作负荷，尤其在低端设备上表现显著。
• 可维护性提升：开发者报告上手更快（平均 2 天 vs. 5 天），并且与状态同步相关的 bug 更少。
• Yle 案例研究：迁移后，页面加载时间平均下降 0.4 秒，且由于对静态标记的依赖增加，服务器端缓存更为高效。

实际意义

• 更小、更快的前端 – 团队可以交付更精简的资源，这对 SEO、移动用户以及成本效益高的 CDN 都是直接的收益。
• 简化的技术栈 – 将大部分交互逻辑迁移到服务器端，可减少构建工具、polyfill 和运行时依赖的数量。
• 更容易招聘和入职 – 新开发者只需扎实的 HTML/CSS 基础以及像 htmx 这样轻量的库，而不必精通某个特定的 SPA 框架。
• 更好的可访问性和 SEO – 服务器渲染的语义化 HTML 天然更易被爬虫抓取，也更友好于屏幕阅读器。
• 渐进式采纳 – 现有项目可以逐步采用 HTML‑first——用 htmx 驱动的片段替换孤立的组件，无需完整重写。
• 与新兴趋势保持一致 – 该方法与擅长生成基于模板标记的 AI 辅助编码工具相契合，可能进一步加速开发。

限制与未来工作

• 适用范围 – 高度交互、实时的仪表盘（例如协作编辑器）仍可能受益于完整的 SPA 框架。
• 工具生态系统 – 虽然 htmx 轻量，但更广泛的生态系统（调试器、测试框架）不如 React/Vue 成熟，这可能阻碍大规模采用。
• 量化泛化 – 基准测试仅在有限的内容密集型站点上进行；需要对更为多样的工作负载（电子商务、游戏等）进行评估。
• AI 驱动的开发 – 作者提出一个未解之问：HTML‑first 实践如何与当前倾向于组件化输出的 AI 代码生成器相交叉。
• 未来研究方向 – 提议进行更大规模的实地研究、自动化迁移工具以及与服务器端框架（如 Django、Rails、ASP.NET）的更深度集成，以验证并扩展研究成果。

作者

• Juho Vepsäläinen

论文信息

• arXiv ID: 2602.17193v1
• 分类: cs.SE
• 出版时间: 2026年2月19日
• PDF: 下载 PDF