HTML5实时搜索性能优化核心是调用方式匹配浏览器渲染节奏与用户行为：input事件+200–300ms防抖、AbortSignal中断旧请求、Map缓存结果、禁用autocomplete/spellcheck。
HTML5 页面里用 JS 插件做实时搜索，核心不在“能不能调”，而在“怎么调才不卡、不重复、不漏结果”。多数性能问题不是插件本身慢，而是调用方式没对齐浏览器渲染节奏和用户输入行为。
debounce 要套在 input 事件上，不是 keyup
很多人用 keyup 监听加防抖，但用户长按字母（比如连按 “a”）时，keyup 触发频率远高于实际输入意图，容易误触发；而 input 事件只在输入值真正变化后触发，更贴近语义。
- 用
addEventListener('input', handler)，别用onkeyup或keydown - debounce 时间建议设为
200–300ms：短于 150ms 容易抢输，长于 400ms 用户感知延迟 - 手动触发（如清空搜索框）要调用
debounce.cancel()，否则残留定时器可能执行过期请求
fetch 请求必须带 AbortSignal 中断旧请求
用户快速输入 “react” → “redux” → “remix”，若不中断前两个请求，后端可能返回乱序响应，前端渲染错乱。原生 fetch 支持 signal 参数，比手写 cancelToken 更轻量可靠。
- 每次新请求前生成新
AbortController：const controller = new AbortController() - 传入
fetch(url, { signal: controller.signal }) - 在 debounce 回调开头执行
abortController.abort()（注意判空） - 捕获
AbortError时不报错、不 toast，这是预期行为
搜索结果缓存该用 Map 而非对象字面量
高频搜索下，用普通对象做键值缓存（如 cache[query] = data）会隐式 toString，导致 "1" 和 1 冲突；且无法控制缓存大小。用 Map 可精确匹配原始查询字符串，也方便做 LRU 清理。
立即学习“前端免费学习笔记（深入）”；
- 初始化：
const cache = new Map() - 存：
cache.set(query, { data, timestamp: Date.now() }) - 取前先检查有效期（比如 60 秒）和 size（超过 50 条就
cache.delete(cache.keys().next().value)） - 不要用
JSON.stringify当 key——序列化开销大，且无法还原原始空格/编码差异
最常被跳过的一步是：没给搜索输入框加 autocomplete="off" 和 spellcheck="false"。浏览器自带拼写检查和自动填充会在输入时偷偷改 DOM，导致 input 事件监听失效或值不一致。这个细节不显眼，但一上线就出搜索空白或重复请求。
