直接 innerhtml.replace() 会卡死页面，因为每次赋值都触发 html 解析、dom 重建和重排；应改用 treewalker 遍历文本节点配合 range.surroundcontents() 安全高亮，或 css highlights 提升性能。
为什么直接 innerHTML.replace() 会卡死页面
2000 行以上文本做搜索高亮时，用 element.innerHTML = element.innerHTML.replace(...) 会明显卡顿甚至假死。这不是 JS 执行慢，而是浏览器在反复解析 HTML 字符串、重建 DOM 树、触发重排（reflow）——每次替换都让整个容器内容被销毁再重建。
- 正则匹配 + 字符串拼接本身很快，但
innerHTML赋值会强制浏览器执行完整 HTML 解析流程 - 若原始文本嵌套了
<strong></strong>、<span></span>等标签，正则极易切碎结构，导致Range.surroundContents()报InvalidNodeTypeError - 用户连续输入时，高频触发该逻辑，主线程被持续占满，输入框响应延迟飙升
用 TreeWalker + mark 替代字符串替换
真正安全且可访问的高亮，必须只操作文本节点，不碰 HTML 结构。核心是跳过元素节点、注释节点，只对 Node.TEXT_NODE 内容做匹配和包裹。
- 用
document.createTreeWalker(root, NodeFilter.SHOW_TEXT)遍历纯文本节点，过滤掉<script></script>、<style></style>内容 - 对每个
node.nodeValue调用.matchAll(new RegExp(escapedKeyword, 'gi'))，注意先escapeHtml(keyword)防止正则元字符（如.、[）出错 - 每匹配到一处，用
document.createElement('mark')创建节点，再通过range.surroundContents()插入——这是唯一语义正确、屏幕阅读器可识别、搜索引擎能索引的高亮方式 - 中文场景需加 Unicode 边界：正则改用
/(?，避免“服务”误匹配“服务器”
CSS Highlights 是更快但有兼容性代价的选择
如果你不需要语义化（比如只是内部工具、文档预览），CSS.highlights 可把高亮从 DOM 操作降级为渲染层指令，性能提升一个数量级。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
TreeWalker定位文本节点后，不再创建mark，而是用Range标记起止位置，批量塞进new Highlight(ranges) - 注册：
CSS.highlights.set("search-result", highlight)；清除：CSS.highlights.clear()—— 不涉及 DOM 修改，无重排 - 样式只能用
::highlight(search-result)定义，支持background-color、color、text-shadow，但不支持background-image或transform - 必须检测支持：
if ('highlights' in CSS) { ... }，否则 fallback 到mark方案
高频输入下必须加节流或延迟更新
用户敲键盘时，input 事件每秒可能触发 20+ 次。哪怕单次高亮耗时 10ms，累积起来也会阻塞主线程。
- 不要用
debounce简单延后——它会让用户感觉“输入滞后”。推荐用requestIdleCallback延迟执行高亮，保证输入响应优先 - 更稳妥的做法是：先记录当前
getSelection().getRangeAt(0).cloneRange()，等高亮完成后再用range.selectNodeContents()恢复光标位置，避免选区丢失 - 如果数据源是静态文本（如日志文件），可提前把全文拆成段落数组，每次只高亮可见区域内的段落，配合
IntersectionObserver动态加载
最易被忽略的一点：高亮后 mark 元素默认是内联的，但父容器若设了 white-space: pre-line 或 line-height 异常，会导致背景错位、文字截断。务必显式重置 mark { display: inline; vertical-align: baseline; }，并在暗色模式下单独定义背景色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
