HTMX 4.0 发布:革新 Web 开发,性能与体验双提升!

news2026/4/15 22:48:00
更简单的 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 复杂性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2521348.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…

网络编程(Modbus进阶)

思维导图 Modbus RTU(先学一点理论) 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议,由 Modicon 公司(现施耐德电气)于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…