Shopify Dawn 12.0第三方优化脚本出现Syntax error unexpected ')'错误

问题概述 #

• 网站经freelancer优化后速度评分达90，但仅Linux桌面端产品页出现加载异常，Windows/Android/iOS端均正常
• 注释掉meta-tags snippet中新增的压缩JS代码后，Bug消失，但速度评分骤降至40-50，同时出现：
  • monorail加载失败
  • Shopify Storefront Inbox v2相关错误
  • 若干produce/v2类404错误

问题代码定位 #

该问题代码通过theme.liquid渲染的snippet/meta-tags文件引入，为文件底部新增的压缩JS：

const observer=new MutationObserver(e=>{e.forEach(({addedNodes:e})=>{e.forEach(e=>{1===e.nodeType&&"IFRAME"===e.tagName&&(e.src.includes("youtube.com")||e.src.includes("vimeo.com"))&&(e.setAttribute("loading","lazy"),e.setAttribute("data-src",e.src),e.removeAttribute("src")),1===e.nodeType&&"LINK"===e.tagName&&(e.href.includes("place")||e.href.includes("vimo.com"))&&(e.setAttribute("data-href",e.href),e.removeAttribute("href")),1!==e.nodeType||"IMG"!==e.tagName||e.src.includes("data:image")||e.setAttribute("loading","lazy"),1===e.nodeType&&"SCRIPT"===e.tagName&&("boomerang")==e.className&&(e.type="text/lazyload"),e.innerHTML.includes("asyncLoad")&&(e.innerHTML=e.innerHTML.replace("if(window.attachEvent)","document.addEventListener('asyncLazyLoad',function(event){asyncLoad();});if(window.attachEvent)").replaceAll(", asyncLoad",", function(){}")),(e.innerHTML.includes("PreviewBarInjector")||e.innerHTML.includes("adminBarInjector"))&&(e.innerHTML=e.innerHTML.replace("DOMContentLoaded","asyncLazyLoad")), (e.src.includes("assets/storefront")||e.src.includes("assets/shopify_pay/")||e.src.includes("cdn.judge.me"))&&(e.setAttribute("data-src",e.src),e.removeAttribute("src")), (e.innerText.includes("gtm.start")||e.innerText.includes("webPixelsManager")||e.innerText.includes("cdn.judge.me")||e.innerText.includes("boosterapps"))&&(e.type="text/lazyload"))})})});observer.observe(document.documentElement,{childList:!0,subtree:!0}); (()=>{var e=class extends HTMLElement{constructor(){super();this._shadowRoot=this.attachShadow({mode:"open"}),this._shadowRoot.innerHTML=':host img { pointer-events: none; position: absolute; top: 0; left: 0; width: 99vw; height: 99vh; max-width: 99vw; max-height: 99vh;'}connectedCallback(){this._fullImageEl=this._shadowRoot.querySelector("#hell"),this._fullImageEl.src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8000 8000'%3E%3C/svg%3E"}};customElements.define("live-55",e);})();document.head.insertAdjacentHTML('afterend', ``); {{ 'boldapps.js' | asset_url | script_tag }}

核心问题分析 #

1. Linux桌面端兼容性冲突：代码中的MutationObserver对DOM节点的批量修改（移除脚本src、替换innerHTML等操作），在Linux桌面端浏览器（Chrome/Firefox Linux版本）中触发了产品页特有的DOM渲染异常，其他端浏览器的DOM解析逻辑未受影响
2. 代码本身的逻辑缺陷：
   • 循环参数重复使用e，引发作用域混淆，导致节点判断逻辑出错
   • 对Shopify核心依赖脚本（storefront、shopify_pay等）的src移除操作，直接破坏了平台内置功能的加载流程
   • 自定义元素live-55的connectedCallback中尝试选择#hell节点，但shadowRoot内未定义该元素，存在无效DOM操作
   • 存在拼写错误（vimo.com应为vimeo.com），导致部分节点过滤逻辑失效

分步修复方案 #

1. 修复代码语法与逻辑问题 #

格式化并修正后的代码如下：

// 替换重复变量名，避免作用域冲突
const observer = new MutationObserver(mutations => {
  mutations.forEach(({ addedNodes }) => {
    addedNodes.forEach(node => {
      // 处理第三方视频IFRAME懒加载
      if (node.nodeType === 1 && node.tagName === "IFRAME") {
        const src = node.src;
        if (src.includes("youtube.com") || src.includes("vimeo.com")) {
          node.setAttribute("loading", "lazy");
          node.setAttribute("data-src", src);
          node.removeAttribute("src");
        }
      }
      // 处理LINK标签（修正拼写错误）
      if (node.nodeType === 1 && node.tagName === "LINK") {
        const href = node.href;
        if (href.includes("place") || href.includes("vimeo.com")) {
          node.setAttribute("data-href", href);
          node.removeAttribute("href");
        }
      }
      // 处理图片懒加载（排除base64格式）
      if (node.nodeType === 1 && node.tagName === "IMG" && !node.src.includes("data:image")) {
        node.setAttribute("loading", "lazy");
      }
      // 处理特定class的脚本懒加载
      if (node.nodeType === 1 && node.tagName === "SCRIPT" && node.className === "boomerang") {
        node.type = "text/lazyload";
      }
      // 替换asyncLoad相关逻辑
      if (node.innerHTML?.includes("asyncLoad")) {
        node.innerHTML = node.innerHTML
          .replace("if(window.attachEvent)", "document.addEventListener('asyncLazyLoad',function(event){asyncLoad();});if(window.attachEvent)")
          .replaceAll(", asyncLoad", ", function(){}");
      }
      // 替换后台工具栏的事件监听
      if (node.innerHTML?.includes("PreviewBarInjector") || node.innerHTML?.includes("adminBarInjector")) {
        node.innerHTML = node.innerHTML.replace("DOMContentLoaded", "asyncLazyLoad");
      }
      // 仅对第三方脚本做懒加载，排除Shopify核心资源
      if (node.nodeType === 1 && (node.tagName === "SCRIPT" || node.tagName === "IFRAME")) {
        const src = node.src;
        if (src.includes("cdn.judge.me")) {
          node.setAttribute("data-src", src);
          node.removeAttribute("src");
        }
      }
      // 标记特定第三方脚本为懒加载
      if (node.nodeType === 1 && node.tagName === "SCRIPT") {
        const innerText = node.innerText;
        if (innerText.includes("gtm.start") || innerText.includes("cdn.judge.me") || innerText.includes("boosterapps")) {
          node.type = "text/lazyload";
        }
      }
    });
  });
});
observer.observe(document.documentElement, { childList: true, subtree: true });

// 修复自定义元素的无效DOM选择
(() => {
  class Live55 extends HTMLElement {
    constructor() {
      super();
      this._shadowRoot = this.attachShadow({ mode: "open" });
      // 补充缺失的#hell元素
      this._shadowRoot.innerHTML = `
        <style>
          :host img { 
            pointer-events: none; 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 99vw; 
            height: 99vh; 
            max-width: 99vw; 
            max-height: 99vh;
          }
        </style>
        <img id="hell" />
      `;
    }
    connectedCallback() {
      this._fullImageEl = this._shadowRoot.querySelector("#hell");
      this._fullImageEl.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8000 8000'%3E%3C/svg%3E";
    }
  }
  customElements.define("live-55", Live55);
})();

// 移除无意义的空内容插入
document.head.insertAdjacentHTML('afterend', ``); 
{{ 'boldapps.js' | asset_url | script_tag }}

关键修复点：

• 更换重复变量名，避免作用域混淆
• 排除对Shopify核心资源（storefront、shopify_pay）的修改，防止平台内置功能出错
• 修正拼写错误，补全自定义元素中缺失的DOM节点
• 拆分零散条件判断为结构化逻辑，提升可维护性

2. 针对Linux桌面端做兼容性兼容 #

如果修复后仍存在Linux端异常，可添加环境判断，跳过该端的部分优化逻辑：

// 检测是否为Linux桌面端
const isLinuxDesktop = navigator.platform.includes('Linux') && !/Android/.test(navigator.userAgent);

if (!isLinuxDesktop) {
  // 仅在非Linux桌面端执行MutationObserver优化逻辑
  const observer = new MutationObserver(/* 上述修复后的逻辑 */);
  observer.observe(document.documentElement, { childList: true, subtree: true });
}

3. 兼顾速度评分的替代方案 #

若上述修复仍无法平衡兼容性与速度，可拆分优化策略：

• 保留图片、第三方视频iframe的懒加载逻辑（这是速度评分的核心贡献点）
• 移除对所有脚本的src移除操作，改用Shopify官方的延迟加载标记
• 启用Shopify内置的图片自动压缩、缓存优化功能补充评分

验证步骤 #

1. 将修复后的代码替换原meta-tags snippet中的压缩JS
2. 在Linux桌面端的Chrome/Firefox中测试产品页加载情况
3. 使用Google PageSpeed Insights重新检测网站速度评分
4. 检查浏览器控制台是否存在monorail、Storefront Inbox相关错误

内容的提问来源于stack exchange，提问作者Michael O'Dell