如何在页面加载时更改 HTML 内容

Question

我在我们的网站上进行 A/B 测试，我的大部分工作都在一个 JS 文件中进行，该文件在渲染其他任何内容之前加载到页面顶部，但在 jQuery 加载之后，有时会派上用场。

举一个更改 H1 标签的非常简单的例子，我通常会在 head 中注入一个样式，将 H1 不透明度设置为 0，然后在 DOMContentLoaded 上，我会操作 H1 内容，然后将不透明度设置为 1。原因这是为了避免在更改发生之前旧内容的闪现 - 隐藏整个对象在眼睛上更美观。

我开始研究 MutationObserver API。我之前在更改用户可以打开的覆盖对话框中的内容时使用过此方法，这似乎是一种很酷的方法，我想知道是否有人设法使用 MutationObserver 来监听文档，因为它是第一次加载/在首次渲染之前和 DOMContentLoaded 之前解析并更改文档？

这种方法可以让我更改 H1 内容，而不必隐藏它、更改它，然后显示它。

我已经尝试过，但到目前为止失败了，并且刚刚读完有关即将过时的突变事件的文章，并想知道我是否正在尝试做一些不可能的事情。然而，我们（不是我）已经成功地将机器人放在火星上，所以我希望我能解决这个问题。

那么是否可以使用 MutationObservers 在页面加载/解析时即时更改 HTML 内容？

感谢您的帮助或指点。

问候， 尼克

Answer 1

MDN 上的文档有一个通用的不完整示例，并且没有展示常见的陷阱。 Mutation Summary 库提供了一个人性化的包装器，但与所有包装器一样，它增加了开销。 请参阅MutationObserver 检测整个 DOM 中节点的性能。

创建并启动观察者。

让我们使用一个递归文档范围的 MutationObserver 来报告所有添加/删除的节点。

var observer = new MutationObserver(onMutation);
observer.observe(document, {
  childList: true, // report added/removed nodes
  subtree: true,   // observe any descendant elements
});

添加节点的简单枚举。

减慢巨大/复杂页面的加载速度，请参阅性能。
有时会错过父容器中合并的 H1 元素，请参阅下一节。

function onMutation(mutations) {
  mutations.forEach(mutation, m => {
    [...m.addedNodes]
      .filter(node =>
        node.localName === 'h1' && /foo/.test(node.textContent))
      .forEach(h1 => {
        h1.innerHTML = h1.innerHTML.replace(/foo/, 'bar');
      });
  });
}

高效枚举添加的节点。

现在是最困难的部分。加载页面时，突变记录中的节点可能是容器（就像整个站点标题块，其所有元素都报告为一个添加的节点）：规范不要求单独列出每个添加的节点，因此我们必须使用

querySelectorAll

（非常慢，但支持复杂的选择器）或

getElementsByTagName

（非常快）来查看每个元素的内部。

const FIND = /\bfoo\b/gi;
const TAG = 'h1'; 
function onMutation(mutations, observer) {
  let stopped;
  for (const m of mutations) {
    for (const node of m.addedNodes) {
      let el, tag = node.localName;
      if ((tag === TAG || !tag && (el = node.parentNode) && el.localName === TAG)
          && FIND.test(node.textContent)) {
        if (!stopped) stopped = !observer.disconnect();
        replaceText(node);
      } else if (tag && node.firstElementChild) { // has children
        for (el of node.getElementsByTagName(TAG)) {
          if (FIND.test(el.textContent)) {
            if (!stopped) stopped = !observer.disconnect();
            replaceText(el);
          }
        }
      }
    }
  }
  if (stopped) observer.observe(document, {childList: true, subtree: true});
}

function replaceText(el) {
  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
  for (let node; (node = walker.nextNode());) {
    const old = node.nodeValue;
    const res = old.replace(FIND, 'bar');
    if (old !== res) node.nodeValue = res;
  }
}

请注意，如果您的目标是较旧的浏览器、

forEach

和

filter

，并且 ES2015

for (val of array)

可能会非常慢，请参阅MutationObserver 检测整个 DOM 中的节点的性能。

为什么选择TreeWalker？保留附加到子元素的任何事件侦听器。仅更改

Text

节点：它们没有子节点，并且更改它们不会触发新的突变，因为我们使用的是

childList: true

，而不是

characterData: true

。

通过实时 HTMLCollection 处理相对罕见的元素，无需枚举突变。

因此，我们寻找一个应该很少使用的元素，例如 H1 标签或 IFRAME 等。在这种情况下，我们可以使用 getElementsByTagName 返回的自动更新的 HTMLCollection 来简化和加速观察者回调。

const h1s = document.getElementsByTagName('h1');

function onMutation(mutations) {
  if (mutations.length === 1) {
    // optimize the most frequent scenario: one element is added/removed
    const added = mutations[0].addedNodes[0];
    if (!added || (added.localName !== 'h1' && !added.firstElementChild)) {
      // so nothing was added or non-H1 with no child elements
      return;
    }
  }
  // H1 is supposed to be used rarely so there'll be just a few elements
  for (var i = 0, h1; (h1 = h1s[i]); i++) {
    if (/foo/.test(h1.textContent)) {
      // reusing replaceText from the above fragment of code 
      replaceText(h1);
    }
  }
}

Answer 2

我以 A/B 测试为生，我经常使用 MutationObservers 并取得良好的结果，但更多时候我只是进行长轮询，这实际上是大多数 3rd 方平台在使用其所见即所得（或有时甚至是他们的代码编辑器）。 50 毫秒的循环不应减慢页面速度或导致 FOUC。

我通常使用简单的模式，例如：

var poller = setInterval(function(){
  if(document.querySelector('#question-header') !== null) {
    clearInterval(poller);

    //Do something
  }
}, 50);

您可以使用 sizzle 选择器获取任何 DOM 元素，就像在 jQuery 中使用 document.querySelector 一样，有时这是您唯一需要库的东西。

事实上，我们在工作中经常这样做，因此我们有一个构建过程和一个模块库，其中包括一个名为 When 的函数，它正是您正在寻找的功能。该特定函数会检查 jQuery 以及元素，但是修改库以不依赖 jQuery 是微不足道的（我们依赖 jQuery，因为它位于我们客户网站的大多数上，并且我们将它用于很多东西） .

说到第 3 方测试平台和 javascript 库，根据实现，许多平台（例如 Optimizely、Qubit 和我认为 Monetate）捆绑了一个 jQuery 版本（有时进行了精简），该版本在执行您的代码时立即可用代码，因此如果您使用的是第 3 方平台，则需要考虑这一点。