如何限制Finnhub股票API返回数据量以提升前端搜索加载速度

可行优化方案 #

• 1. 增加搜索防抖，减少无效触发 #

当前keyup事件每按一次键盘就执行一次全量搜索，用户连续输入时会产生大量无意义的计算，添加300ms防抖逻辑，输入停止后才执行搜索，可减少90%以上的不必要搜索操作。

• 2. 预处理数据源，避免重复计算 #

原有代码每次搜索都要对标的的名称、代码字段重复转小写，28000条数据每次遍历都多执行两次重复转换，可在接口返回数据后统一预处理生成小写的检索字段，搜索时直接比对预处理内容，大幅降低单轮搜索的计算量。

• 3. 限制渲染条数，减少DOM开销 #

DOM渲染是性能瓶颈的核心，就算搜索出数千条结果，用户也不会逐行查看，渲染时仅取前100-200条展示即可，能把DOM操作耗时降到原来的1%以下。

• 4. 可选进阶优化：构建前缀索引 #

如果对搜索速度要求更高，可在数据加载完成后预先构建首字母/前缀索引，搜索时直接走索引匹配，无需全量遍历，28000条数据的索引构建耗时极短，搜索速度可再提升数倍。

优化后完整代码 #

// 防抖函数，默认延迟300ms
const debounce = (func, delay = 300) => {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
};

// 搜索事件添加防抖包装
input.addEventListener('keyup', debounce((e) => {
  const searchString = e.target.value.toLowerCase();
  // 直接匹配预处理好的小写字段，无需重复转换
  const filteredCompanies = stockCompanies.filter((company) => {
    return (
      company.lowerDesc.includes(searchString) ||
      company.lowerSymbol.includes(searchString)
    );
  });
  displayCompanies(filteredCompanies);
}));

const loadCompanies = async () => {
  try {
    const res = await fetch(`https://finnhub.io/api/v1/stock/symbol?exchange=US&token=${apiKey}`);
    const rawData = await res.json();
    // 预处理数据，提前生成小写检索字段
    stockCompanies = rawData.map(item => ({
      ...item,
      lowerDesc: item.description.toLowerCase(),
      lowerSymbol: item.displaySymbol.toLowerCase()
    }));
    displayCompanies(stockCompanies);
  } catch (err) {
    console.error(err);
  }
};

const displayCompanies = (data) => {
  const dynamic = [];
  // 最多渲染前200条，可根据业务需求调整上限
  const showData = data.slice(0, 200);
  for (let i = 0; i < showData.length; i++){
    dynamic.push(`
    <div class="listings_card">
      <h1>${showData[i].description}</h1>
      <p>${showData[i].displaySymbol}</p>
    </div>`);
  }
  document.querySelector('.listings').innerHTML = dynamic.join('');
};

loadCompanies();

以上三项基础优化落地后，28000条标的的搜索基本不会有卡顿感，完全满足日常使用需求。

内容的提问来源于stack exchange，提问作者benleem