替换浏览器插件中的大量文本

Question

我正在尝试开发一个 Firefox 插件，可以将任何页面上的文本音译成特定语言。实际上它只是我迭代并使用此代码的一组 2D 数组

function escapeRegExp(str) {
    return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}

function replaceAll(find, replace) {
    return document.body.innerHTML.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}

function convert2latin() {
    for (var i = 0; i < Table.length; i++) {
        document.body.innerHTML = replaceAll(Table[i][1], Table[i][0]);
    }
}

它可以工作，我可以忽略 HTML 标签，因为它只能是英文，但问题是性能。当然，它非常非常贫穷。由于我没有 JS 经验，所以我尝试 google 并发现 documentFragment 可能有帮助。
也许我应该使用另一种方法？

Answer 1

根据您的 cmets，您似乎已经被告知最昂贵的事情是当您完全替换页面的全部内容时（即当您分配给 document.body.innerHTML）时发生的 DOM 重建。您目前正在为每个替换执行此操作。这会导致 Firefox 为您所做的每个替换重新渲染整个页面。完成所有替换后，您只需分配给document.body.innerHTML 一次。

以下内容应该是加快速度的第一步：

function escapeRegExp(str) {
    return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}

function convert2latin() {
    newInnerHTML = document.body.innerHTML
    for (let i = 0; i < Table.length; i++) {
        newInnerHTML = newInnerHTML.replace(new RegExp(escapeRegExp(Table[i][1]), 'g'), Table[i][0]);
    }
    document.body.innerHTML = newInnerHTML
}

您在 cmets 中提到没有真正需要使用 RegExp 进行匹配，因此以下内容会更快：

function convert2latin() {
    newInnerHTML = document.body.innerHTML
    for (let i = 0; i < Table.length; i++) {
        newInnerHTML = newInnerHTML.replace(Table[i][1], Table[i][0]);
    }
    document.body.innerHTML = newInnerHTML
}

如果您确实需要使用正则表达式进行匹配，并且要多次执行这些精确替换，则最好在第一次使用之前创建所有正则表达式（例如，当创建 Table 时/已更改）并存储它们（例如在 Table[i][2] 中）。

但是，分配给document.body.innerHTML 是一种不好的做法：

正如 8472 所提到的，替换 document.body.innerHTML 的全部内容是执行此任务的一种非常笨拙的方式，它有一些明显的缺点，包括可能破坏页面中其他 JavaScript 的功能和潜在的安全问题。更好的解决方案是仅更改文本节点的textContent。

一种方法是使用TreeWalker。这样做的代码可能是这样的：

function convert2latin(text) {
    for (let i = 0; i < Table.length; i++) {
        text = text.replace(Table[i][1], Table[i][0]);
    }
    return text
}

//Create the TreeWalker
let treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT,{
    acceptNode: function(node) { 
        if(node.textContent.length === 0
            || node.parentNode.nodeName === 'SCRIPT' 
            || node.parentNode.nodeName === 'STYLE'
        ) {
            //Don't include 0 length, <script>, or <style> text nodes.
            return NodeFilter.FILTER_SKIP;
        } //else
        return NodeFilter.FILTER_ACCEPT;
    }
}, false );
//Make a list of nodes prior to modifying the DOM. Once the DOM is modified the TreeWalker
//  can become invalid (i.e. stop after the first modification). Doing so is not needed
//  in this case, but is a good habit for when it is needed.
let nodeList=[];
while(treeWalker.nextNode()) {
    nodeList.push(treeWalker.currentNode);
}
//Iterate over all text nodes, changing the textContent of the text nodes 
nodeList.forEach(function(el){

    el.textContent = convert2latin(el.textContent));
});

Answer 2

不要使用 innerhtml，它会破坏在 DOM 节点上注册的任何 javascript 事件处理程序，或者使对页面的 javascript 持有的 dom 节点的引用已过时。换句话说，你可以很容易地用它来打破一个页面。当然效率低下。

您可以改用treewalker 并仅过滤文本节点。可以通过每 1000 个文本节点或类似的方式使用 window.setTimeout 推迟下一步来增加步行。

如果您足够早地注册插件脚本，您还可以使用 mutation observer 在插入文本节点后立即收到有关文本节点的通知，并逐步替换它们，这样可以减少麻烦。