Question

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

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

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

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

我尝试但到目前为止失败了，刚刚结束了关于即将到来的突变事件的阅读，并想知道我是否尝试做一些不可能的事情。然而，我们（不是我）已经设法将机器人放在火星上，所以我希望我能解决这个问题。

因此，可以使用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, mutation =>
        Array.prototype
            .filter.call(mutation.addedNodes, added =>
                added.localName == 'h1' && added.textContent.match(/foo/)
            ).forEach(h1 =>
                h1.innerHTML = h1.innerHTML.replace(/foo/, 'bar')
            );
    );
}

添加节点的高效枚举。

现在困难的部分。在加载页面时，变异记录中的节点可能是容器（就像整个站点标题块一样，其所有元素仅报告为一个添加节点）：规范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, lenAdded = added.length; j < lenAdded; j++) {
            var node = added[j];
            var found;
            if (node.localName === 'h1') {
                found = [node];
            } else if (node.children && node.children.length) {
                found = node.getElementsByTagName('h1');
            } else {
                continue;
            }
            for (var k = 0, lenFound = found.length; k < lenFound; k++) {
                var h1 = found[k];
                if (!h1.parentNode || !h1.textContent.match(/foo/)) {
                    // either removed in another mutation or has no text to replace
                    continue;
                }
                var walker = document.createTreeWalker(h1, NodeFilter.SHOW_TEXT);
                while (walker.nextNode()) {
                    var textNode = walker.currentNode;
                    var text = textNode.nodeValue;
                    if (text.match(/foo/)) {
                        textNode.nodeValue = text.replace(/foo/, 'bar');
                    }
                }
            }
        }
    }
}

为什么丑陋的香草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来简化和加速观察者回调。

var h1s = document.getElementsByTagName('h1');
function onMutation(mutations) {
    if (mutations.length == 1) {
        // optimize the most frequent scenario: one element is added/removed
        var added = mutations[0].addedNodes[0];
        if (!added || (added.localName !== 'h1' && !added.children.length)) {
            // 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, len = h1s.length; i < len; i++) {
        var h1 = h1s[i];
        if (!h1.textContent.match(/foo/)) {
            continue;
        }
        var walker = document.createTreeWalker(h1, NodeFilter.SHOW_TEXT);
        while (walker.nextNode()) {
            var textNode = walker.currentNode;
            var text = textNode.nodeValue;
            if (text.match(/foo/)) {
                textNode.nodeValue = text.replace(/foo/, 'bar');
            }
        }
    }
}

Answer 2

我做A / B测试为生，我经常使用MutationObservers并取得良好的效果，但更多时候我只是做长时间的轮询，这实际上是大多数第三方平台在你使用他们的WYSIWYG时所做的事情（有时甚至是他们的代码编辑）。 50毫秒的循环不应该减慢页面速度或引起FOUC。

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

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

    //Do something
  }
}, 50);

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

事实上，我们经常在工作中这样做，我们有一个构建过程和a module library，其中包含一个名为 When 的功能，它正是您正在寻找的。该特定函数检查jQuery以及元素，但修改库不依赖于jQuery（我们依赖于jQuery，因为它在我们客户端的大多数上＆＃）将是微不足道的。 39; s网站，我们用它来做很多事情。）

说到第三方测试平台和javascript库，取决于实现，很多平台（如Optimizely，Qubit，我认为Monetate）捆绑了一个版本的jQuery（有时修剪），可立即使用执行您的代码，以便在您使用第三方平台时进行调查。

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

2 个答案: