Hotwire Turbo与Shopify集成时严重内存泄漏问题求助

每次通过Turbo驱动完成导航后，堆内存会因滞留的分离DOM节点持续增长，最终导致浏览器崩溃。

问题描述 #

• 配置：基础Turbo设置，用<turbo-frame id="main" data-turbo-action="advance">包裹主内容区域
• 即使移除所有自定义JavaScript，内存泄漏仍存在，付费与免费主题均出现该问题

观察结果 #

• 堆快照显示之前页面的完整DOM树被滞留
• 切换为PJAX后问题完全解决，说明Turbo对Shopify动态更新的处理逻辑存在问题

复现步骤 #

• 创建基础Shopify主题或使用现有主题，按以下步骤配置Turbo：
  1. 在theme.liquid文件中通过CDN引入Turbo：

     <script src="https://cdn.skypack.dev/@hotwired/turbo"></script>
     

  2. 用Turbo frame包裹主内容区域：

     <turbo-frame id="main" data-turbo-action="advance">
       {{ content_for_layout }}
     </turbo-frame>
     

  3. 通过Turbo导航在店铺不同页面间切换
  4. 使用Chrome DevTools监控内存使用情况（堆快照功能）
  5. 观察到多次导航后堆内存呈指数增长，数千个分离DOM节点被滞留

已尝试方案 #

• 禁用Turbo Frames：移除所有<turbo-frame>元素，内存泄漏仍存在，问题可能与Turbo Drive的页面管理或元素缓存机制相关
• 手动节点替换：尝试在每次导航后用cloneNode(true)替换document.body以重置事件监听器并清除滞留元素，短暂有效但导致部分Shopify组件状态重复、引用失效
• 使用Turbo的data-turbo-permanent属性：将页眉、页脚等关键元素包裹该属性以在导航间保留，问题仍存在，甚至这些“永久”元素也被滞留，导致节点堆积
• 动态脚本加载策略：为干扰Turbo缓存的Shopify特定脚本测试多种加载策略（defer、async、动态导入），无改善，多次页面切换后内存仍激增
• 完全移除theme.js：移除整个theme.js文件及相关脚本以隔离问题，内存泄漏仍发生，说明根源不在自定义JavaScript，可能是Turbo对Shopify动态架构的处理逻辑问题
• 手动注销并重新初始化区块：尝试使用Shopify.designMode钩子和Turbo生命周期事件（turbo:before-fetch-request、turbo:frame-render）手动清理并重新初始化Shopify区块，首次导航有效但多次渲染后失效，显示Turbo未在导航后完全清理DOM结构
• 切换为PJAX对比：用PJAX替代Turbo实现导航，无内存泄漏，确认问题特定于Turbo的元素处理和DOM缓存机制

核心疑问 #

Turbo的DOM缓存与Shopify的动态区块渲染是否存在已知冲突？有哪些可行的策略或已知解决方案可解决该内存泄漏问题？

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