Google Sheets大型列表搜索优化：16k条目快速过滤方案

你的核心问题在于频繁操作大量DOM元素——遍历16k个li并修改类名会触发多次浏览器重排重绘，这是性能瓶颈的根源。以下是几个高效的解决方案：

核心思路：缓存数据 + 批量渲染DOM #

不要直接操作已有的16k个li元素，而是先在内存中过滤数据，再一次性渲染匹配的结果，大幅减少DOM操作次数。

1. 缓存原始城市数据 #

页面加载时，把API返回的城市列表存到内存数组中，避免每次搜索都从DOM读取文本（DOM读取本身也有性能开销）：

// 全局缓存原始城市数据
let cityData = [];

// 页面初始化时调用（替换你原来生成li的函数）
async function loadCities() {
  // 假设这里是调用API获取数据的逻辑
  const response = await fetch('你的API地址');
  cityData = await response.json(); // 假设返回的是[{name: "北京"}, ...]或直接是字符串数组
  
  // 初始渲染全部城市
  renderCities(cityData);
}

// 页面加载完成后执行
window.addEventListener('load', loadCities);

2. 过滤数据后批量渲染 #

用DocumentFragment在内存中构建DOM片段，一次性插入页面，只触发一次浏览器重排：

function renderCities(filteredCities) {
  const ul = document.querySelector('#cityList ul');
  ul.innerHTML = ''; // 清空原有内容
  
  const fragment = document.createDocumentFragment();
  filteredCities.forEach(city => {
    const li = document.createElement('li');
    li.textContent = typeof city === 'object' ? city.name : city;
    fragment.appendChild(li);
  });
  
  ul.appendChild(fragment);
}

function filterCities() {
  const query = document.querySelector('#citySearch').value.trim().toLowerCase();
  
  // 过滤数据（内存中操作，比DOM操作快N倍）
  const filtered = cityData.filter(city => {
    const cityName = typeof city === 'object' ? city.name.toLowerCase() : city.toLowerCase();
    return cityName.includes(query);
  });
  
  // 批量渲染结果
  renderCities(filtered);
}

3. 防抖优化（减少不必要的搜索触发） #

用户输入时会连续触发oninput，加个防抖函数，延迟执行过滤，避免频繁渲染：

// 防抖函数
function debounce(func, delay = 300) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 把filterCities包装成防抖版本
const debouncedFilter = debounce(filterCities);

// 修改HTML中的oninput为防抖函数
// <input type="text" id="citySearch" oninput="debouncedFilter()">

4. 可选：预优化匹配逻辑 #

如果需要进一步提速，可以提前把所有城市名转成小写存起来，避免每次过滤时重复转换：

// 加载数据时预转小写
async function loadCities() {
  const response = await fetch('你的API地址');
  const rawData = await response.json();
  cityData = rawData.map(city => ({
    name: city.name,
    lowerName: city.name.toLowerCase() // 预存小写名称
  }));
  renderCities(cityData);
}

// 过滤时直接用预存的小写名称
const filtered = cityData.filter(city => city.lowerName.includes(query));

为什么这比原方案快？ #

• 原方案每次搜索要遍历16k个DOM元素，每个元素的类名修改都会触发局部重排；新方案只在内存中操作数组，然后一次性渲染匹配结果，DOM操作次数从16k次降到1次。
• DocumentFragment不会触发重排，直到它被插入到DOM中，进一步减少浏览器开销。

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