一千张卡在浏览器里即时筛选
没有后端,没有请求。筛选在本地一次算完,剩下的只是别让它卡。
数据一共一千一百多张卡,每张卡带六个可筛选字段。第一版每次输入都向后端要一次结果,输入法还没上屏,请求已经发了三次。
先把数据搬到本地
整份数据压缩后不到 300 KB,直接嵌进页面。之后所有筛选都在内存里做,输入到出结果控制在两帧以内。
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 排队,连续输入时只跑最后一次。