如何使 jQuery replaceWith() “非阻塞”（异步）？

Question

我正在使用函数replaceStr() 来替换body 标签中的一些字符串。如果 html 页面很小，则替换不明显。但是如果 html 页面更大更复杂，你会注意到它。替换是阻塞浏览器。我的问题是，如何使替换非阻塞？替换对页面并不重要，因此它可以在浏览器不忙时在后台发生。我尝试使用 async 和 await，但我认为 replaceWith() 函数无法处理 Promises，这就是为什么它不能使用 async/await时间>。但那你怎么能做到呢？

function replaceStr(myStrArr) {
  const container = $('body :not(script)');
  myStrArr.map((mystr) => {
    container
      .contents()
      .filter((_, i) => {
        return i.nodeType === 3 && i.nodeValue.match(mystr.reg);
      })
      .replaceWith(function () {
        return this.nodeValue.replace(mystr.reg, mystr.newStr);
      });
  });
}

感谢您的帮助。

Answer 1

您当前的实现有一些地方可以在异步路由之前进行优化。例如，您可以摆脱 jQuery 依赖项。这对您的情况没有多大帮助，但会增加开销。

然后，目前您正在映射您的替换项和所有候选节点的每个节点，每次都替换 nodeValue。这可能会触发每次重绘。

相反，您可以使用TreeWalker 快速迭代相关节点，并且只更新一次nodeValues。

---

在我的测试中，以下代码的运行速度大约比您当前的代码快 16 倍。也许这已经足够了？

function replaceStr_upd(replacements) {
    // create a tree walker for all text nodes
    const it = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
        // but skip SCRIPTs
        acceptNode: node => node.parentNode.nodeName === 'SCRIPT'
                            ? NodeFilter.FILTER_REJECT
                            : NodeFilter.FILTER_ACCEPT
    });

    // a helper function
    const applyReplacements = initial => replacements.reduce((text, r) => text.replace(r.reg, r.newStr), initial);

    // iterate over all text node candidates
    while (it.nextNode()) {
        // but only update once per node:
        it.currentNode.nodeValue = applyReplacements(it.currentNode.nodeValue);
    }
}