LUXFER

个人博客 · 黑白复印 · 2026.11.01
编号 LF·26·1101 · 11.01 23:10 · 2 分钟

一千张卡在浏览器里即时筛选

没有后端,没有请求。筛选在本地一次算完,剩下的只是别让它卡。

数据一共一千一百多张卡,每张卡带六个可筛选字段。第一版每次输入都向后端要一次结果,输入法还没上屏,请求已经发了三次。

先把数据搬到本地

整份数据压缩后不到 300 KB,直接嵌进页面。之后所有筛选都在内存里做,输入到出结果控制在两帧以内。

Listing 1js
const index = cards.map(c => ({
  id: c.id,
  text: [c.name, c.tags.join(" "), c.region].join(" ").toLowerCase(),
}));

function filter(q) {
  const needle = q.toLowerCase();
  return index.filter(c => c.text.includes(needle));
}

剩下的只是渲染

结果超过两百条时只渲染前两百,其余靠滚动续上。筛选用 requestIdleCallback 排队,连续输入时只跑最后一次。