Shopify添加购物车后站点崩溃、内存飙升问题求助

我在Shopify主题的Liquid模板区域编写了一段JS脚本用于实现添加购物车功能，代码如下：

await fetch(window.Shopify.routes.root + 'cart/add.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(formData)
  })
  .then(response => {
    return response.json();
  })
  .catch((error) => {
    console.error('Error:', error);
    return false;
  });

该添加购物车功能可正常运行，但完成操作后Shopify站点出现崩溃情况，且Windows任务管理器显示内存占用随时间持续升高，需要解决方案。

• 检查formData内存引用：确认formData是否绑定了DOM元素（如文件输入框的File对象），这类引用如果未被回收会持续占用内存。建议在请求完成后手动解除引用：formData = null;。

• 修复异步语法混用问题：代码同时使用await和.then()可能导致Promise链逻辑混乱，引发异步任务堆积。统一改为纯async/await写法，确保错误捕获和资源清理：

try {
  const response = await fetch(window.Shopify.routes.root + 'cart/add.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(formData)
  });
  const data = await response.json();
  // 处理返回数据逻辑
} catch (error) {
  console.error('Error:', error);
} finally {
  formData = null;
}

• 排查重复事件绑定：如果这段代码绑定在按钮点击事件上，检查是否存在重复绑定（如Liquid重复渲染导致多次执行绑定代码）。改用事件委托避免重复绑定：

document.querySelector('.add-cart-wrap').addEventListener('click', async (e) => {
  if (!e.target.matches('.add-to-cart-btn')) return;
  // 执行添加购物车逻辑
});

• 用浏览器工具定位内存泄漏：打开开发者工具的Memory面板，分别在添加购物车前、多次添加后拍摄内存快照，对比DOM节点、JS对象的增长情况，找出持续累积的对象。重点排查全局变量、第三方插件的冲突问题。

• 清理API响应数据：如果response.json()返回大量数据，处理完成后立即清除相关引用：data = null;，避免数据持续占用内存。

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