如何用jQuery对十万行以上文本行执行普通与正则搜索

通用基础优化 #

1. 预存日志数据到内存 #

页面加载完成后，把所有日志行的文本和对应DOM元素缓存到数组中，彻底避免每次搜索都遍历庞大的DOM树：

// 页面加载完成后执行
const logContainer = document.getElementById('log_block');
const logData = Array.from(logContainer.querySelectorAll('pre.logs')).map(el => ({
  text: el.textContent,
  el: el,
  // 提前转小写，用于不区分大小写的普通搜索
  lowerText: el.textContent.toLowerCase()
}));

2. 用CSS类控制显示隐藏 #

定义统一的hidden类替代直接修改元素style.display，减少DOM重排次数：

.hidden {
  display: none !important;
}

普通搜索优化 #

1. 替换DOM选择器为内存数组遍历 #

直接操作缓存的logData数组，用原生字符串方法匹配，批量更新元素类名：

function handlePlainSearch() {
  const searchVal = document.getElementById('search_bar').value.trim();
  const isCaseInsensitive = true; // 根据需求开关大小写匹配
  const targetVal = isCaseInsensitive ? searchVal.toLowerCase() : searchVal;

  // 批量处理，尽量合并DOM操作
  logData.forEach(item => {
    const matches = isCaseInsensitive 
      ? item.lowerText.includes(targetVal) 
      : item.text.includes(targetVal);
    item.el.classList.toggle('hidden', !matches);
  });
}

2. 添加输入防抖 #

避免用户连续输入时频繁触发搜索，减少不必要的计算：

function debounce(func, delay = 300) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 绑定搜索框输入事件
document.getElementById('search_bar').addEventListener('input', debounce(handlePlainSearch));

正则搜索优化 #

1. 预编译正则+Web Worker异步处理 #

把耗时的正则匹配逻辑放在Web Worker线程，避免阻塞主线程导致页面卡顿：

第一步：创建Worker文件（log-search-worker.js）

self.onmessage = function(e) {
  const { logTexts, regexStr, flags } = e.data;
  const matches = [];
  try {
    const regex = new RegExp(regexStr, flags);
    logTexts.forEach((text, index) => {
      if (regex.test(text)) {
        matches.push(index);
      }
    });
    self.postMessage({ success: true, matches });
  } catch (err) {
    self.postMessage({ success: false, error: err.message });
  }
};

第二步：主线程调用逻辑

const searchWorker = new Worker('log-search-worker.js');

function handleRegexSearch(regexStr, flags = 'g') {
  const logTexts = logData.map(item => item.text);
  searchWorker.postMessage({ logTexts, regexStr, flags });
}

// 监听Worker返回的匹配结果
searchWorker.onmessage = function(e) {
  if (e.data.success) {
    const matchedIndexes = new Set(e.data.matches);
    logData.forEach((item, index) => {
      item.el.classList.toggle('hidden', !matchedIndexes.has(index));
    });
  } else {
    console.error('正则表达式错误:', e.data.error);
  }
};

// 绑定正则搜索按钮事件（示例）
document.getElementById('regex_search_btn').addEventListener('click', () => {
  const regexStr = document.getElementById('search_bar').value.trim();
  handleRegexSearch(regexStr);
});

2. 无Worker的降级方案 #

如果无法使用Worker，可将遍历拆分为多个批次，用requestAnimationFrame分批处理，避免主线程长时间阻塞：

function handleRegexSearchWithoutWorker(regexStr, flags = 'g') {
  const regex = new RegExp(regexStr, flags);
  let currentIndex = 0;
  const batchSize = 1000; // 每批处理1000行

  function processBatch() {
    const endIndex = Math.min(currentIndex + batchSize, logData.length);
    for (; currentIndex < endIndex; currentIndex++) {
      const item = logData[currentIndex];
      const matches = regex.test(item.text);
      item.el.classList.toggle('hidden', !matches);
    }
    if (currentIndex < logData.length) {
      requestAnimationFrame(processBatch);
    }
  }

  processBatch();
}

进阶优化：虚拟滚动 #

如果10万行全部渲染在DOM中，本身就会占用大量内存导致页面卡顿。虚拟滚动只渲染当前视口内的日志行，DOM元素数量维持在几十到几百行，从根源上解决性能问题：

1. 仅在内存中存储所有日志文本，无需初始化渲染所有DOM元素；
2. 计算视口高度、单行高度，确定需要渲染的起始/结束索引；
3. 滚动时更新渲染的行，通过padding-top/padding-bottom模拟完整滚动条长度；
4. 搜索时只需过滤内存中的日志数组，再基于过滤结果进行虚拟滚动渲染。

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