HTMX hx-get局部更新页面时重复加载资源问题求助（hx-push-url相关）

问题重现 #

核心测试代码如下：

main.html：

<!DOCTYPE html>
<html hx-push-url="true">
  <head>
    <script src="https://unpkg.com/htmx.org@2.0.0/dist/htmx.min.js" defer="defer"></script>
  </head>
  <body>
    <img src="https://htmx.org/img/bss_bars.png" width="100"/>
    <div><a href="test.html" hx-get="test.html" hx-target="#main" hx-swap="outerHTML">Test</a></div>
    <div id="main">
      Main
    </div>
  </body>
</html>

test.html：

<div>
  Test
</div>

现象：

• 首次访问main.html时，资源加载符合预期
• 点击"Test"链接后，HTMX正确替换#main内容，但页面中的图片会被重复加载，即使图片不在被替换的DOM范围内
• 移除<html>标签上的hx-push-url="true"后，重复加载问题消失，但将该属性移到链接等其他元素上无法解决

原因分析 #

当在<html>根元素上设置hx-push-url="true"时，HTMX会将整个页面的DOM序列化为完整HTML文档，并替换浏览器历史记录中的当前条目。这个过程中，浏览器会重新解析序列化后的文档内容，导致其中的静态资源（比如图片）被再次请求——即使这些资源根本没有被修改或替换。

这种全局设置会强制HTMX处理完整文档的历史快照，而非仅处理请求相关的目标元素，从而触发不必要的资源加载。

解决方案 #

方案1：针对单个请求设置push-url，并指定历史快照元素 #

不在<html>上全局启用hx-push-url，而是在需要修改历史记录的请求元素上单独设置，同时通过hx-history-elt指定仅将目标元素的内容保存到历史记录中：

<a href="test.html" hx-get="test.html" hx-target="#main" hx-swap="outerHTML" hx-push-url="true" hx-history-elt="#main">Test</a>

这样HTMX只会把#main的内容作为历史快照保存，不会序列化整个页面，自然不会触发图片的重复加载。

方案2：拦截历史保存事件，手动控制快照内容 #

如果必须全局启用hx-push-url，可以通过监听htmx:beforeHistorySave事件，修改要保存的DOM内容，只保留必要部分：

document.addEventListener('htmx:beforeHistorySave', function(evt) {
  // 阻止HTMX默认的历史保存行为
  evt.detail.shouldSwap = false;
  // 仅将#main元素内容推入历史记录
  const mainEl = document.getElementById('main');
  history.pushState({ htmx: { elt: mainEl.outerHTML } }, document.title, window.location.href);
});

方案3：配置资源缓存（辅助优化） #

在生产环境中，给图片等静态资源配置正确的缓存策略（比如Cache-Control响应头），即使HTMX触发重复请求，浏览器也能直接从缓存读取资源，避免实际的网络资源浪费。

内容的提问来源于stack exchange，提问作者tslettebo