如何在script标签加载前可靠移除？MutationObserver拦截无效如何解决

问题根因 #

你遇到的失效问题并非MutationObserver存在缺陷，而是浏览器HTML解析逻辑的优先级导致：
浏览器在解析静态HTML中的<script src="https://www.googletagmanager.com/gtag/js?id=UA-12345678-9">标签时，会在节点正式插入DOM、触发MutationObserver回调之前就提前发起网络请求，等你在回调中删除节点时，请求已经发送完成，自然无法实现拦截效果。

可靠解决方案 #

方案1：重写script元素的src属性拦截（最适配当前场景）

这个方案可以在src属性被赋值的第一时间触发拦截，早于浏览器发起网络请求的时机，静态、动态插入的script都可以被拦截。
注意这段代码必须放在所有需要拦截的script标签之前执行：

// 保留原生src setter
const originalSrcSetter = Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype, 'src').set;
// 重写src setter实现拦截
Object.defineProperty(HTMLScriptElement.prototype, 'src', {
  set: function(value) {
    // 自定义拦截规则，匹配需要阻止的脚本地址
    if (value.includes('googletagmanager.com/gtag/js')) {
      console.log('已拦截gtag脚本加载：', value);
      return;
    }
    // 非拦截范围的地址正常加载
    originalSrcSetter.call(this, value);
  }
});

方案2：Service Worker全局请求拦截

如果需要全局拦截站点所有网络请求，可以注册Service Worker，在fetch事件中匹配gtag地址直接返回空响应，适合无法修改页面顶层代码的场景。

方案3：直接移除静态标签

如果页面内容完全由你控制，直接删除HTML中对应的gtag script标签是成本最低的方案。

原有代码改造说明 #

如果一定要用MutationObserver实现拦截，只能拦截后续动态插入的script标签，对静态写在HTML中的script标签无效，因为浏览器预加载逻辑早于MutationObserver的回调时机。

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