使用jQuery v3.7.1遇DOMSubtreeModified弃用警告，求解决方案

问题重现 #

控制台出现以下废弃警告：

[Deprecation] Listener added for a synchronous 'DOMSubtreeModified' DOM Mutation Event. This event type is deprecated and work is underway to remove it from this browser. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead.

该警告来自jQuery 3.7.1源码，而非业务脚本，且Chrome、Firefox用户也遇到相同问题。

问题根源 #

jQuery在处理DOM操作后的回调、动画同步等场景时，仍在使用已被标准废弃的DOMSubtreeModified同步Mutation事件。浏览器已明确计划移除该事件类型，当前使用会引发性能问题，未来可能导致兼容性故障。

修复方案 #

1. 不修改jQuery源码的临时兼容方案 #

在引入jQuery之后、业务脚本之前，添加以下代码覆盖jQuery相关方法，用MutationObserver替代旧事件监听：

(function($) {
  // 覆盖jQuery的domManip方法，替换DOMSubtreeModified为MutationObserver
  const originalDomManip = $.fn.domManip;
  $.fn.domManip = function(args, callback, allowIntersection) {
    const result = originalDomManip.apply(this, arguments);

    this.each(function() {
      const $el = $(this);
      // 移除原有DOMSubtreeModified监听
      $el.off('DOMSubtreeModified');

      if (typeof callback !== 'function') return;

      // 创建MutationObserver实例
      const observer = new MutationObserver(() => {
        callback.call(this);
      });

      // 配置观察选项：监听子节点变化（匹配原DOMSubtreeModified的核心场景）
      observer.observe(this, {
        childList: true,
        subtree: true,
        attributes: false,
        characterData: false
      });

      // 存储观察者实例，方便后续销毁（可选）
      $el.data('__jq_mutation_observer', observer);
    });

    return result;
  };

  // 若警告来自bind事件场景，添加对应覆盖逻辑
  const originalBind = $.fn.bind;
  $.fn.bind = function(eventName, handler) {
    if (eventName === 'DOMSubtreeModified') {
      return this.each(function() {
        const $el = $(this);
        const observer = new MutationObserver(() => {
          handler.call(this);
        });
        observer.observe(this, { childList: true, subtree: true });
        $el.data('__jq_mutation_observer', observer);
      });
    }
    return originalBind.apply(this, arguments);
  };
})(jQuery);

2. 修改jQuery源码方案（适合自定义构建场景） #

1. 下载jQuery 3.7.1的未压缩源码（jquery-3.7.1.js）
2. 搜索关键字DOMSubtreeModified，定位到注册该事件的代码段（通常在domManip函数或_mark相关逻辑中）
3. 将事件监听代码替换为MutationObserver实现，示例：

   // 替换原有的$(target).on('DOMSubtreeModified', handler)
   const observer = new MutationObserver(handler);
   observer.observe(target, { childList: true, subtree: true });
   // 若需要销毁逻辑，需将观察者实例存储起来
   

4. 修改完成后，使用官方构建工具重新生成压缩版代码。

jQuery后续更新的可能性 #

jQuery团队已知晓该废弃警告问题，计划在4.x版本中全面移除对旧Mutation Events的依赖，改用MutationObserver。但3.x分支作为稳定兼容分支，大概率不会进行破坏性修改，仅会做局部兼容调整。短期不要依赖3.x分支的官方修复，可关注jQuery官方仓库的issue跟踪进度。

修复代码的添加位置 #

• 若使用不修改源码的方案：代码必须放在jquery-3.7.1.min.js引入之后、业务脚本之前，确保能覆盖jQuery的原生方法。
• 若使用修改源码的方案：直接在未压缩的jquery-3.7.1.js中找到对应代码段替换，修改后重新生成压缩版替换原文件即可。

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