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

Question

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

举一个更改 H1 标签的非常简单的例子，我通常会在头部注入(inject)一个样式，将 H1 不透明度设置为 0，然后在 DOMContentLoaded 上，我会操作 H1 内容，然后将不透明度设置为 1。这样做的原因是为了避免在更改发生之前闪现旧内容 - 隐藏整个对象在视觉上更加优雅。

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

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

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

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

感谢您的帮助或指点。

问候，尼克

Answer 1

The docs on MDN有一个通用的不完整示例，并且不展示常见的陷阱。 Mutation summary库提供了一个人性化的包装器，但像所有包装器一样它增加了开销。参见 Performance of MutationObserver to detect nodes in entire DOM .

创建并启动观察者。

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

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

添加节点的简单枚举。

减慢非常大/复杂页面的加载速度，请参阅 Performance .
有时会错过合并到父容器中的 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');
      });
  });
}

添加节点的高效枚举。

现在是困难的部分。突变记录中的节点可能是加载页面时的容器(例如整个站点标题 block ，其所有元素都报告为一个添加的节点):规范 doesn't require每个添加的节点都将单独列出，因此我们必须使用 querySelectorAll(非常慢)或 getElementsByTagName(非常快)查看每个元素。

function onMutation(mutations) {
  for (var i = 0, len = mutations.length; i < len; i++) {
    var added = mutations[i].addedNodes;
    for (var j = 0, node; (node = added[j]); j++) {
      if (node.localName === 'h1') {
        if (/foo/.test(node.textContent)) {
          replaceText(node);
        }
      } else if (node.firstElementChild) {
        for (const h1 of node.getElementsByTagName('h1')) {
          if (/foo/.test(h1.textContent)) {
            replaceText(h1);
          }
        }
      }
    }
  }
}

function replaceText(el) {
  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
  for (let node; (node = walker.nextNode());) {
    const text = node.nodeValue;
    const newText = text.replace(/foo/, 'bar');
    if (text !== newText) {
      node.nodeValue = newText;
    }
  }
}

为什么是两个丑陋的 for 循环？因为 forEach 和 filter 和 ES2015 for (val of array) 在某些浏览器中可能非常慢，请参阅 Performance of MutationObserver to detect nodes in entire 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);
    }
  }
}