JavaScript实现百万级植物名表单自动补全的故障排查与方案咨询

• 页面体积过载：110万条植物名称直接硬编码到JS数组中，会生成几十MB甚至上百MB的HTML文件，浏览器加载超大体积页面时会触发内存限制，直接中断渲染返回空白页，而非缓慢加载。
• 遍历逻辑效率极低：原w3Schools的示例代码是为小数据量设计的，每次输入都会全量遍历整个候选数组，110万次循环会直接阻塞JS主线程，就算页面加载完成也会完全无响应。你测试的10万条数据返回慢就是这个原因，数据量再大直接触发浏览器的无响应页面终止机制。

推荐采用前端输入+后端实时查询的方案，是百万级数据下性能最优、改造成本最低的方案：

第一步：给数据库字段加索引 #

先给wcvp表的taxon_name字段加前缀索引，加快匹配查询速度：

CREATE INDEX idx_taxon_name ON wcvp(taxon_name);

第二步：新增后端查询接口 #

新建search.php文件，专门处理前端的自动补全查询请求，只返回匹配的前20条结果：

<?php
require './sqlite/dsn.php';
// 获取前端传的输入关键词
$keyword = $_GET['keyword'] ?? '';
if (empty($keyword)) {
    echo json_encode([]);
    exit;
}
// 用前缀匹配查询，加LIMIT只返回需要的数量
$sql = "SELECT DISTINCT taxon_name FROM wcvp WHERE taxon_name LIKE ? LIMIT 20";
$stmt = $db->prepare($sql);
$stmt->execute([$keyword . '%']);
$results = $stmt->fetchAll(PDO::FETCH_COLUMN, 0);
echo json_encode($results);
?>

第三步：修改前端自动补全逻辑 #

把原来全量遍历数组的逻辑，改成发AJAX请求拿匹配结果，同时加防抖避免频繁请求：

function autocomplete(inp) {
  var currentFocus;
  // 防抖定时器
  var searchTimer;
  inp.addEventListener("input", function(e) {
      var val = this.value;
      clearTimeout(searchTimer);
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      // 输入停止300ms后再发请求
      searchTimer = setTimeout(() => {
        fetch(`search.php?keyword=${encodeURIComponent(val)}`)
          .then(res => res.json())
          .then(arr => {
            if (!arr.length) return;
            var a = document.createElement("DIV");
            a.setAttribute("id", this.id + "autocomplete-list");
            a.setAttribute("class", "autocomplete-items");
            this.parentNode.appendChild(a);
            // 只遍历最多20条结果，速度极快
            for (i = 0; i < arr.length; i++) {
              var b = document.createElement("DIV");
              b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
              b.innerHTML += arr[i].substr(val.length);
              b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
              b.addEventListener("click", function(e) {
                  inp.value = this.getElementsByTagName("input")[0].value;
                  closeAllLists();
              });
              a.appendChild(b);
            }
          })
      }, 300)
  });
  // 剩下的keydown、addActive、removeActive、closeAllLists逻辑和原来完全一致，直接复用即可
}
// 初始化的时候不需要再加载全量countries数组，直接调用autocomplete即可
autocomplete(document.getElementById("myInput"));

可选优化方案 #

如果不想发后端请求，也可以选择前端前缀树（Trie）存储110万条数据，查询时间复杂度仅和输入词长度相关，远优于全量遍历，但初始化前缀树的时间和内存占用仍较高，优先级低于后端查询方案。

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