javascript - 如何使 jQuery replaceWith() "non-blocking"(异步)？

Question

我正在使用函数 replaceStr()替换 body 标签中的一些字符串。如果 html 页面很小，则替换不明显。但是如果 html 页面更大更复杂，你就会注意到它。替换正在阻止浏览器。我的问题是，如何才能使替换非阻塞？替换对页面并不重要，因此它可以在浏览器不忙时在后台进行。我尝试使用异步和等待，但我认为 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);
    }
}