如何高效实现HTML模板的本地全局搜索功能？

本文共计869个文字，预计阅读时间需要4分钟。

直接对 `document.body.innerHTML` 调用 `indexOf` 搜索特定内容，通常返回 `-1` —— 这意味着不是没有匹配，而是因为 HTML 已经被浏览器解析并格式化过了。例如，换行会被转换为空白字符、连续的空白会被压缩、某些标签会自动关闭等。

真正要搜的是「渲染后用户看到的内容」，不是原始 HTML 字符串。所以得走文本节点遍历：

• 用 document.createTreeWalker 遍历所有 Node.TEXT_NODE，跳过 script/style/comment
• 对每个文本节点的 nodeValue 做 includes() 或正则匹配
• 匹配成功后，用 node.parentElement 定位到宿主元素，方便高亮或滚动

如何让搜索不卡住页面？避免阻塞主线程

全量遍历 DOM + 高亮操作在长页面（比如 10k+ 节点）下极易掉帧。