搜索框打字卡顿 INP 差在输入事件里做了什么

站内搜索每敲一个字 INP 都在 480 毫秒以上 输入法还没选字候选框就卡住 输入框要等一下才显示字符。碰到这种情况，我一般先确认改动有没有真的生效。

原因不复杂，input 事件里同步做了全量数组过滤和整块列表重渲染 每敲一次都要完整跑一遍 键盘事件本身很快 是回调把主线程堵住了。

「输入事件阻塞」这类改动最怕改一半，回滚脚本先准备好，再动生产。别只看报错的最后一行，往上看几行，真正的起因通常在上面。

const onInput = debounce(e => render(e.target.value), 200);
input.addEventListener('input', onInput);

同类问题如果隔一段时间又出现，多半是某个定时任务或重启流程把改动冲掉了。把这次用到的命令存进笔记，比记住结论有用，换个环境还能照着走。

具体做法是，输入回调只更新关键词 过滤和渲染都挪到下一帧去做；给输入加 200 毫秒防抖 连续敲字只触发末尾的那一次渲染；列表改成虚拟滚动 每次只渲染可视区里的十几条。

最后用这个标准收尾，连敲十个字每次响应都在 200 毫秒以内 输入法候选框不再停顿。