HTMX 4.0 发布：革新 Web 开发，性能与体验双提升！

更简单的 Web 开发

HTMX 长期以来被认为功能已趋于完备，是成功达成宏伟目标且广受赞誉、在生产环境广泛部署的项目。HTMX 2.0 曾被视为最终版本，其创造者承诺不会有 HTMX 3.0。但 HTMX 团队摒弃旧引擎，采用基于 JavaScript 的 Fetch API 的新引擎，将新版本命名为 HTMX 4.0。当被问及跳过 3.0 版本的原因，创造者 Carson Gross 只说了一个词：“哎呀”。Gross 不仅创建了 HTMX，还打造了 “Grug Brained Developer”，为年轻开发者提供建议。HTMX 借助 HTML 和 REST 让 Web 开发回归简单。HTMX 4.0 移除旧的传输协议 XHR 对象，代之以 Fetch API，带来性能和开发体验的显著提升，fetch() 方法支持流式响应，与 React Server Components 工作方式类似。软件开发中人们热衷新技巧，但有时会极端，HTMX 践行审视需求、找简单方案的理念，虽 HTMX 2.0 能满足需求，但 HTMX 4.0 有更好实现方式。

原生流式处理

HTMX 2.x 使用源于 20 世纪 90 年代末 Internet Explorer 的 XMLHttpRequest 对象，浏览器需缓冲整个响应后替换。HTMX 4.0 通过 Fetch API 采用 ReadableStream，能在 HTML 片段到达时处理和注入，实现流式 UI 效果，只需 14KB 小脚本，还可与能输出字符串的后端配合，使用 Fetch 提升性能、减少代码量、简化架构。

Idiomorph DOM 合并

原生流式处理是 HTMX 4.0 基础新特性，4.0 重构还带来“变形”或“差异比较” HTML 页面功能，能超快速更改页面且不增加复杂性，在 Hotwired 中较知名。其算法会比较页面与现有内容，仅替换有变化部分。HTMX 4.0 默认启用 Idiomorph 算法，由 Carson 领导，在 HTMX 2.0 中是扩展，4.0 中成标配。Idiomorph 受 Hotwired 的 Morphdom 启发，被 Hotwired 采用，GitHub 页面有其算法详细技术描述，它是 Fetch 带来代码库简洁性的好处。

属性继承（一项重大变更）

HTMX 4.0 对属性继承有重大变更，非 Fetch 升级必需，基于实际使用经验。团队认为默认不继承 HTMX 属性更安全、开发体验更好。之前版本中 hx - target 等属性隐式继承，导致子元素受不明影响，4.0 中继承变为显式，可用 :inherited 修饰符指定子元素继承属性，遵循行为局部性原则。

历史记录优化不再

HTMX 2.x 有复杂历史记录引擎，试图对本地 DOM 快照保存到 localStorage，但效果不佳。HTMX 4.0 放弃此做法，回归页面重新加载的标准行为。

错误处理和状态特定替换

多数 InfoWorld 读者很少遇 500 或 404 错误，服务器返回错误代码时，HTMX 4.0 直接替换内容，避免静默失败，能为用户提供视觉反馈。更新亮点是新的状态特定替换语法，可在 HTML 中为不同 HTTP 代码定义行为，将不同服务器错误路由到不同 UI 元素。

<htmx - swap> 标签

<htmx - swap> 标签添加是重大结构改进，可包装响应片段，针对特定元素，是旧“带外”替换方式更简洁易读的替代方案，类似 Hotwired 的 Turbo Streams，体现 HTMX 和 Hotwired 相互影响，能基于单个服务器响应实现复杂多点界面更新。

原生视图过渡

HTMX 4.0 默认集成浏览器的原生 View Transitions API，无需额外 CSS 或 JavaScript，就能实现页面状态动画过渡，如淡入淡出或滑动效果。即便不熟悉 HTMX，也值得了解其目标，它与 Hotwired 等工具展示利用标准特性发挥效能的可能，理解 HTMX 后看待 Web 开发领域方式会不同，还能避免 JavaScript 复杂性。