AJAX实时搜索响应越来越慢排查及JS选型咨询

• 核心原因1：PHP接口返回冗余脚本
  你的table.php文件末尾额外输出了<script type="text/javascript" src="data.js"></script>，每次AJAX请求成功后，这段脚本会被插入到结果容器中重复加载执行。请求次数越多，页面中重复的JS实例、冗余事件监听就越多，内存占用持续升高，操作响应自然越来越慢。
• 核心原因2：重复触发请求
  前端同时绑定了keyup和input两个事件监听，单次输入/删除操作会触发两次事件回调，产生两倍的无效请求，请求队列快速堆积。
• 核心原因3：无防抖和请求取消逻辑
  每次按键都会立刻发起AJAX请求，快速输入删除时会瞬间产生大量并发请求，而浏览器对同域名的并发请求数有上限，旧请求未完成时新请求只能排队等待；同时旧请求返回后依然会执行DOM更新操作，额外消耗性能。
• 次要问题：PHP语句逻辑隐患
  mysqli_stmt_close($prepare)写在了判断prepare成功的逻辑块外，当prepare失败时$prepare为false，调用close会抛出错误，额外增加响应耗时。

1. 清理PHP接口冗余输出
   删除table.php末尾的<script type="text/javascript" src="data.js"></script>代码，接口文件只返回搜索结果对应的HTML内容，不要输出额外的页面资源标签。同时调整语句关闭逻辑的位置，避免报错：
   修正后的PHP核心逻辑片段：

   if($prepare = mysqli_prepare($link, $coin)){
       mysqli_stmt_bind_param($prepare, "s", $param_term);
       $param_term = $_REQUEST["term"] . '%';
       if(mysqli_stmt_execute($prepare)){
           $result = mysqli_stmt_get_result($prepare);
           if(mysqli_num_rows($result) > 0){
               while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
                   echo "<p>" . $row["Tables_in_crypto"] . "</p>";
               }
           } else{
               echo "<p>no result</p>";
           }
       } else{
           echo "ERROR: $coin. " . mysqli_error($link);
       }
       // 语句关闭放到prepare成功的逻辑块内
       mysqli_stmt_close($prepare);
   }
   

2. 修正前端事件绑定
   移除重复的keyup事件监听，仅保留input事件即可覆盖所有输入值变化场景（包括键入、删除、粘贴、剪切等操作），避免单次操作触发两次请求。
3. 增加防抖与请求中断逻辑
   给输入回调加300ms防抖，等用户停止输入后再发请求，减少无效请求；发起新请求前先中止上一个未完成的请求，避免请求排队。
   修正后的JS代码：

   $(document).ready(function(){
       let xhr = null;
       let timer = null;
       $(document).on("input",".search",function(){
           const input = $(this).val();
           const result = $(this).next(".result");
           // 清除上一次的防抖定时器
           clearTimeout(timer);
           // 中止上一个未完成的请求
           if(xhr && xhr.readyState !== 4){
               xhr.abort();
           }
           if(!input.length){
               result.empty();
               return;
           }
           // 300ms防抖
           timer = setTimeout(() => {
               xhr = $.get("table.php", {term: input}).done(function(data){
                   result.html(data);
               });
           }, 300);
       });
   });
   

针对实时搜索这类轻量交互场景，两者没有绝对的优劣，按项目实际情况选即可：

• 如果项目已经全局引入了jQuery，直接用jQuery开发即可，它封装好的AJAX、DOM操作方法可以减少大量兼容代码，开发效率更高，性能完全能满足需求。
• 如果项目本身没有引入jQuery，没必要为了这个单功能额外加载整个jQuery库，用原生JavaScript实现即可，代码体积更小，没有额外依赖。

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