htmx 4.0:用八个月拆解隐式魔法

htmx 4.0:用八个月拆解隐式魔法

前端htmxHTML-over-the-wire

数据源:Lobsters 讨论与官方发布

2026 年 8 月 28 日,htmx 4.0.0 正式发布。这个让无数后端开发者在 HTML 中直接操作 DOM 的魔法库,用了 8 个月时间重写底层,把过去几年积攒的隐式机制逐一拆除。

htmx 4 发布 图:htmx 4 发布页面。来源:four.htmx.org

从 XMLHttpRequest 到 fetch()

htmx 此前一直依赖 XMLHttpRequest 作为传输层。在 4.0 版本中,开发团队将其全面迁移至原生的 fetch() API。这标志着该框架彻底告别历史包袱,在网络请求层面与现代 Web 平台完全一致。

底层变更带来的直接后果是事件系统的重构。htmx:xhr:* 相关事件被彻底删除,其余事件也规范化为 htmx:phase:action[:sub-action] 格式(如 htmx:before:request)。事件命名的严谨化降低了开发者猜测上下文的成本,但也意味着现有项目需要经历一次强痛感的迁移。

拆除隐式继承机制

htmx 2.x 的核心特性之一是属性隐式继承,父元素的属性会自动作用于子元素。在 4.0 中,如果需要继承,必须显式添加 :inherited 后缀(如 hx-confirm:inherited)。这是对代码可预测性的一次强制修正,隐式作用域在小项目中是便利,在大型工程中则是难以调试的灾源。

随之废弃的还有 hx-disinherit 等属性。所有继承变成显式声明后,模板的层级关系在代码阅读层面变得一目了然。

重新设计 History 与缓存

在之前的版本中,htmx 默认使用 localStorage 缓存页面快照以处理后退操作。但在 4.0 中,后退导航时默认会重新发起 fetch 请求并将页面内容 swap 进来。这说明官方意识到包含第三方 JS 库 DOM 变更的死快照无法真正恢复状态,网络请求反而比不可控的本地缓存更可靠。

如果开发者依然需要本地缓存,可以选择使用 hx-history-cache 扩展。这剥离了核心库的越界行为,将缓存策略的选择权交还给了工程团队。

htmx 4 性能对比 图:htmx 4 性能表现评估。来源:four.htmx.org

走向平台级规范化

在功能层面,4.0 内置了基于 idiomorph 算法的 Morph swaps,并新增了 <hx-partial> 标签来处理多元素替换。相较于此前略显复杂的 out-of-band swaps,新标签提供了一种更清晰、语义化更强的部分更新范式。

在 NPM 上,官方并没有将 4.0 标记为 latest,而是继续保持 2.x 的 latest 标签直到 2027 年初。这一发布策略旨在保护使用非版本化 CDN URL 的老用户,同时也反映了框架作者对此次破坏性更新冲击力的清醒评估。

htmx 4.0 的所有动作都在指向「100-year web services」的长期可维护性。当一个工具决定放弃讨巧的隐式机制,转而拥抱显式声明与平台原生能力时,它已经超越了实用补丁的定位。它正试图向整个行业证明,HTML-over-the-wire 这条路径完全可以在严肃的大型工程中站稳脚跟。

参考链接:

  • htmx 4 发布官方博客
  • Lobsters 社区热点讨论