Chrome扩展使用jQuery/JS实现文档关键词高亮无卡顿方案咨询

现有代码卡顿核心原因 #

• 时间复杂度过高：每个文本节点都要完整遍历2次关键词列表，时间复杂度为O(文本节点数 * 关键词数)，10000个关键词的场景下运算量会达到百万级，直接阻塞主线程
• 冗余逻辑过多：父节点标签判断、文本合法性判断重复执行，浪费算力
• DOM操作不合理：频繁修改innerHTML触发多次重排重绘，内联样式、重复id也会增加DOM解析开销
• DOM遍历范围过大：无差别遍历所有节点，包含不需要处理的script、style、input等标签

具体优化措施 #

1. 匹配算法优化，降低时间复杂度 #

放弃逐关键词遍历匹配的逻辑，改用单次遍历就能找出所有匹配关键词的方案：

• 优先选AC自动机（Aho-Corasick算法）：提前把所有关键词构建成字典树，一次扫描文本即可输出所有匹配结果，10000级关键词的匹配效率比逐词匹配高10~100倍
• 轻量备选方案：将关键词拼接为正则表达式一次性匹配，注意转义关键词中的正则特殊字符：

// 转义正则特殊字符
const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
// 拼接正则，可按需添加单词边界\b避免局部匹配
const keywordReg = new RegExp(wordsHighlight.map(w => escapeRegExp(w.word)).join('|'), 'g');

2. DOM遍历逻辑优化 #

• 限定遍历范围，提前排除不需要处理的标签，不要无差别遍历所有节点：

const excludeTags = new Set(['SCRIPT', 'STYLE', 'TITLE', 'IFRAME', 'INPUT', 'TEXTAREA', 'CODE', 'PRE']);
function traverseTextNodes(node) {
  // 排除禁止处理的标签和已高亮的节点
  if (excludeTags.has(node.tagName) || node.classList?.contains('global-solution')) return;
  for (const child of node.childNodes) {
    if (child.nodeType === Node.TEXT_NODE) {
      processTextNode(child); // 处理合法文本节点
    } else if (child.nodeType === Node.ELEMENT_NODE) {
      traverseTextNodes(child);
    }
  }
}
// 只遍历body内容，不需要处理head
traverseTextNodes(document.body);

• 所有合法性判断（文本开头字符校验、空文本校验）放到processTextNode中执行一次即可，无需重复判断。

3. DOM操作优化 #

• 移除重复id：id不能重复，把global-solution改为class，样式统一写到扩展的css文件中，删除内联样式：

.global-solution {
  background-color: #ebf5f9; 
  cursor: pointer; 
  font-style: italic; 
  text-transform: capitalize;
}

• 用文本节点拆分的方式插入高亮标签，不要直接修改父节点innerHTML，避免父节点原有事件绑定失效：

function processTextNode(textNode) {
  const text = textNode.textContent;
  const matches = [...text.matchAll(keywordReg)];
  if (matches.length === 0) return;

  let currentOffset = 0;
  const parent = textNode.parentNode;
  matches.forEach(match => {
    const matchIndex = match.index;
    const matchText = match[0];
    // 拆分匹配位置前的文本
    if (matchIndex > currentOffset) {
      parent.insertBefore(
        document.createTextNode(text.slice(currentOffset, matchIndex)),
        textNode
      );
    }
    // 插入高亮span
    const span = document.createElement('span');
    span.className = 'global-solution';
    span.textContent = matchText;
    parent.insertBefore(span, textNode);
    currentOffset = matchIndex + matchText.length;
  });
  // 插入剩余文本
  if (currentOffset < text.length) {
    parent.insertBefore(
      document.createTextNode(text.slice(currentOffset)),
      textNode
    );
  }
  // 删除原文本节点
  textNode.remove();
}

• 所有文本节点处理完后再统一触发重排，不要边处理边修改DOM。

4. 主线程阻塞优化 #

• 用requestIdleCallback把高亮逻辑放到浏览器空闲时间执行，不阻塞页面正常交互：

requestIdleCallback(() => {
  traverseTextNodes(document.body);
}, { timeout: 2000 }); // 最长延迟2秒执行

• 关键词量超过5000时，把关键词匹配逻辑放到Web Worker中运行，Worker计算完匹配位置后再返回主线程操作DOM，完全不占用主线程资源。

关于服务器处理方案的说明 #

该方案可行但性价比极低，不推荐使用：

• 需要上传页面全部文本到服务器，存在隐私泄露风险，且受网络延迟影响，高亮生效速度远慢于本地处理
• 全量替换页面HTML会销毁页面原有所有事件绑定，导致页面功能异常
• 服务器成本会随用户量上涨，远高于本地优化的成本

内容的提问来源于stack exchange，提问作者Gaspar Aufranc