替代DOMSubtreeModified的jQuery方案：旧代码转非弃用实现

嘿，我明白你的困扰——DOMSubtreeModified确实已经被废弃，而且它的性能表现本来就不太稳定，容易触发不必要的重复执行。别担心，我们有更现代、更可靠的方案来替代它，就是MutationObserver，这是目前浏览器推荐用来监听DOM变化的API。

先理清楚核心需求 #

你的代码原本要做的是：监听所有.markdownx-preview元素的内容变化，一旦内容更新，就触发MathJax重新排版页面上的数学公式。我们用MutationObserver来实现同样的逻辑，同时优化性能。

完整替换代码 #

下面是改造后的代码，我保留了你原本的ChangeMathOnPage函数，只替换了监听部分，还加了防抖优化：

// 保留你原本的MathJax排版函数
function ChangeMathOnPage() {
  MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}

// 新增防抖函数：避免短时间内频繁触发排版（比如输入时每打一个字都触发）
function debounce(func, delay = 200) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  };
}

// 把排版函数包装成防抖版本，减少不必要的性能消耗
const debouncedTypeset = debounce(ChangeMathOnPage);

// 遍历所有预览容器，为每个容器绑定MutationObserver
$('.markdownx-preview').each(function() {
  const targetElement = this;

  // 创建MutationObserver实例，传入变化时的回调函数
  const observer = new MutationObserver(function(mutations) {
    // 只要DOM有变化，就触发防抖后的排版
    debouncedTypeset();
  });

  // 配置观察规则：监听子节点增减、文本内容变化，同时包含所有子树
  const observerConfig = {
    childList: true,    // 监听子节点的添加/移除
    characterData: true,// 监听文本内容的变化
    subtree: true       // 监听目标元素的所有子元素（不仅仅是直接子节点）
  };

  // 开始观察目标元素的DOM变化
  observer.observe(targetElement, observerConfig);
});

关键部分解释 #

• MutationObserver：这是浏览器原生提供的API，专门用来监听DOM的变化，相比废弃的DOMSubtreeModified，它可以更精确地控制监听的内容，性能也更好。
• 防抖函数：预览区更新时（比如用户输入内容），可能会连续触发很多次DOM变化事件。防抖函数可以让我们等待用户停止输入一小段时间（这里设的200毫秒，可调整）后再执行排版，避免重复调用MathJax造成性能浪费。
• 观察配置：childList和characterData确保我们能捕获到预览区里所有内容更新的情况，subtree: true则覆盖了容器内所有层级的子元素，不会漏掉任何一处变化。

额外注意事项 #

• 如果页面后续会动态添加新的.markdownx-preview元素，你需要在元素添加完成后，重新执行上面的绑定逻辑，为新元素创建Observer。
• 如果需要停止某个容器的监听，可以调用observer.disconnect()（你需要把observer实例存起来，方便后续调用）。

这样替换之后，你的代码不仅符合现代JavaScript标准，运行起来也会更稳定高效！

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