JavaScript循环调用replaceAll过慢 浏览器扩展脏话替换求优化方案

你当前的实现存在两个核心的性能瓶颈，也是耗时5分钟的核心原因：

• 反复重写document.body.innerHTML：每次循环都会重新读取整个页面的HTML字符串、执行替换、再把整串写回DOM，单次写innerHTML就会触发浏览器全量重解析DOM、重建渲染树，2000次循环相当于执行了2000次全页DOM重绘，页面越大开销越夸张，同时还会销毁页面原有绑定的所有JS事件监听器、破坏页面交互功能，甚至可能把HTML标签的属性、类名内容也误替换，破坏页面结构。
• 2000次单独遍历替换：每一轮循环都要遍历整页HTML字符串匹配单个不雅词，时间复杂度被放大了2000倍。

最优的实现逻辑是仅处理页面纯文本节点、一次性合并匹配所有不雅词，既不会破坏DOM结构，也能把替换操作压缩到一轮DOM遍历完成，正常千级词库、万级DOM节点的页面也能在几十毫秒内完成替换。

实现代码如下：

// 1. 先转义不雅词中的正则特殊字符，避免匹配异常
function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

// 2. 把所有不雅词合并成一个正则，一次匹配所有词
// 可根据需求加i标记实现大小写不敏感匹配
const profaneRegex = new RegExp(profaneWords.map(escapeRegExp).join('|'), 'g');

// 3. 用TreeWalker获取页面所有纯文本节点，跳过script、style等非内容节点
const treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_TEXT,
  {
    acceptNode: function(node) {
      // 过滤掉script、style、noscript、输入类标签内的文本，也可按需加其他过滤规则
      const parentTag = node.parentElement.tagName.toLowerCase();
      if (['script', 'style', 'noscript', 'textarea', 'input'].includes(parentTag)) {
        return NodeFilter.FILTER_REJECT;
      }
      return NodeFilter.FILTER_ACCEPT;
    }
  }
);

// 4. 遍历所有文本节点执行替换
const textNodes = [];
let currentNode;
// 先收集所有符合要求的文本节点，避免遍历过程中DOM变化影响TreeWalker遍历
while (currentNode = treeWalker.nextNode()) {
  textNodes.push(currentNode);
}
textNodes.forEach(node => {
  node.nodeValue = node.nodeValue.replace(profaneRegex, '***');
});

如果页面文本节点量级极大，可通过requestIdleCallback分批处理文本节点，完全不会阻塞主线程渲染，用户不会感知到卡顿：

// 把上面的批量替换逻辑换成分批处理
let index = 0;
const batchSize = 50; // 每批次处理50个文本节点
function processBatch() {
  const end = Math.min(index + batchSize, textNodes.length);
  for (; index < end; index++) {
    textNodes[index].nodeValue = textNodes[index].nodeValue.replace(profaneRegex, '***');
  }
  if (index < textNodes.length) {
    requestIdleCallback(processBatch);
  }
}
requestIdleCallback(processBatch);

内容的提问来源于stack exchange，提问作者Virej Dasani