搜索框输入时动态高亮列表项为什么会闪烁？

Mr-慧慧提问于 2026-02-19 09:49:33 阅读 125

交互

最近在做搜索组件，想实现输入时动态高亮匹配项。用JavaScript把匹配的关键词用<mark>标签包裹，但滚动列表时高亮会闪一下，而且原来的颜色样式被覆盖了。我试过给mark加!important，但滚动到可视区外的项恢复原样时又出现回退闪烁…

代码是这样写的：


function highlight(text) {
  return this.value.replace(new RegExp(text, 'gi'), '<mark>$&</mark>');
}
// 列表项渲染用 innerHTML 输出处理后的文本

这样写有什么问题吗？感觉性能也不太好，输入快一点就会卡顿…

我来解答赞 5 收藏

反馈

2 条解答

Air-红敏 Lv1

你这个问题主要有两个原因，一个是 DOM 操作频繁导致的性能问题，另一个是样式和渲染机制的问题。咱们分开说。

JS 里面用正则匹配然后直接操作 innerHTML 的方式，每次输入都会重新渲染整个列表项的内容，这种频繁的 DOM 操作开销很大，尤其是列表项多的时候，性能肯定会卡顿。另外，当你滚动时，浏览器会对可视区外的元素进行重绘和回流，这就会导致高亮效果闪一下，因为你的代码逻辑实际上是重新生成了内容，破坏了原有的结构和状态。

解决办法可以从这两方面入手：减少 DOM 操作频率、优化样式处理。

首先，别直接用 innerHTML 频繁替换内容。可以用一个虚拟 DOM 或者 diff 算法的思想，只更新那些真正需要变化的部分。比如把每个列表项的文本节点单独拿出来处理，而不是整个替换掉。这样能大幅降低重绘的开销。

其次，关于样式被覆盖的问题，标签确实会带来一些默认样式干扰，建议你给它定义明确的样式，并且尽量避免依赖 !important。更好的做法是用自定义的 class 来控制高亮效果，比如：



function highlight(text, keyword) {

  if (!keyword) return text;

  const reg = new RegExp((${keyword}), 'gi');

  return text.replace(reg, $1);

}

然后在 CSS 里面定义：



.highlight {

  background-color: yellow;

  color: inherit; /* 继承原有文字颜色 */

}

最后，为了优化性能，可以考虑防抖（debounce）或者节流（throttle）。用户输入时没必要每次都触发高亮逻辑，稍微延迟一下再执行，能有效减少不必要的计算。比如：



let timer;

function onInput(event) {

  clearTimeout(timer);

  timer = setTimeout(() => {

    const keyword = event.target.value;

    updateList(keyword); // 更新列表高亮

  }, 300); // 300ms 延迟

}

总结一下，核心思路就是：减少 DOM 操作、优化样式定义、加入防抖机制。这样既解决了闪烁问题，也能提升性能。希望对你有帮助！

2026-02-20 08:08

百里振巧 Lv1

问题出在你用 innerHTML 每次都重绘了整个列表项，导致闪烁和性能差。改成用 DOM 操作来局部更新高亮部分，性能会好很多。

试试这个方案，用 document.createDocumentFragment 创建文档片段，只更新需要高亮的部分：

function highlightNode(text, container) {

  let fragment = document.createDocumentFragment();

  let parts = container.textContent.split(new RegExp((${text}), 'gi'));

  parts.forEach(part => {

    if (part.toLowerCase() === text.toLowerCase()) {

      let mark = document.createElement('mark');

      mark.textContent = part;

      fragment.appendChild(mark);

    } else {

      fragment.appendChild(document.createTextNode(part));

    }

  });

  container.innerHTML = '';

  container.appendChild(fragment);

}

记得在滚动时保存每个列表项的滚动位置，避免回退闪烁。检查一下你的 CSS，确保 mark 标签的样式继承了父元素的字体和颜色属性。

2026-02-19 10:05